<aside> ⚠️

You should rarely write custom CSS. Consult other reference views in the code before writing custom css - you might be missing some existing classes, helpers or components.

</aside>

Also check out View API’s

STView

.st-view class is used for all views. It sets the most important styles for displaying the view like scrolling and padding. Views won’t work without this class.

Centering content

The .center class can be added to the <main> element of a view when the view can be displayed very widely (most often this means not in a popup). This class will center the view.

If you don’t add this class, the content will take up all the available space. This class also makes sure the horizontal lines in the view are centered and don’t take the full width.

<template>
    <div class="st-view">
        <STNavigationBar :title="$t('My View')" />

        <main class="center">
            <h1>
                {{ $t('My View') }}
            </h1>
            <!-- ... -->
        </main>
    </div>
</template>

STNavigationBar

This is the bar at the top of all views. Normally every view has this bar. The navigation bar automatically adds a back and close button depending on how and where the view is displayed.

Disable pop or dismiss buttons

By default the back and dismiss buttons are added automatically. This can be disabled by setting disable-pop or disable-dismiss to true.

<STNavigationBar :title="title" :disable-pop="true" :disable-dismiss="true" />