System bars
The v-system-bar
component can be used for displaying statuses to the user. It looks like the Android system bar and can contain icons, spacers, and some text.
Usage
v-system-bar
in its simplest form displays a small container with default theme.
API
Component | Description |
---|---|
v-system-bar | Primary Component |
Anatomy
The recommended placement of elements inside of v-system-bar
is:
- Place informational icons to the right
- Place time or other textual information to the far right
Element / Area | Description |
---|---|
1. Container | The System Bar container has a default slot with content justified right |
2. Icon items (optional) | Used to convey information through the use of icons |
3. Text (optional) | Textual content that is typically used to show time |
Examples
Props
Color
You can optionally change the color of the v-system-bar
by using the color
prop.
Window
A window bar with window controls and status info.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub