VSystemBar API
name | type | default |
|---|---|---|
boolean
| false | |
Applies position: absolute to the component. | ||
string
| undefined | |
Applies specified color to the control - supports utility colors with or without | ||
string | number | undefined | |
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page. | ||
string | number | undefined | |
Sets the height for the component. | ||
string
| undefined | |
Assign a specific name for layout registration. | ||
string | number | 0 | |
Adjust the order of the component in relation to its registration order. | ||
string | number | boolean | undefined | |
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page. | ||
string | (new () => any) | FunctionalComponent | 'div' | |
Specify a custom tag used on the root element. | ||
string
| undefined | |
Specify a theme for this component and all of its children. | ||
boolean
| false | |
Removes any applied border-radius from the component. | ||
boolean
| false | |
Increases the system bar height to 32px (24px default). | ||
The default Vue slot. | ||
name | default |
|---|---|
rgba(var(--v-theme-surface-light)) | |
map.get(settings.$rounded, 0) | |
tools.theme-color('on-surface-light', var(--v-high-emphasis-opacity)) | |
0 | |
1 1 auto | |
tools.map-deep-get(settings.$typography, 'label-small', 'size') | |
tools.map-deep-get(settings.$typography, 'label-small', 'weight') | |
24px | |
var(--v-medium-emphasis-opacity) | |
flex-end | |
tools.map-deep-get(settings.$typography, 'label-small', 'letter-spacing') | |
tools.theme-color('background', 0.7) | |
tools.map-deep-get(settings.$typography, 'label-small', 'line-height') | |
0 8px | |
8px | |
absolute fixed | |
end | |
none | |
( $system-bar-background, $system-bar-color ) | |
( $system-bar-font-size, $system-bar-font-weight, $system-bar-letter-spacing, $system-bar-line-height, $system-bar-text-transform ) | |
32px |