VAppBar API
name | type | default |
|---|---|---|
boolean
| false | |
Applies position: absolute to the component. | ||
string | number | boolean | false | |
Applies utility border classes to the component. To use it, you need to omit the | ||
boolean
| false | |
Morphs the component into a collapsed state, reducing its maximum width. | ||
'end' | 'start' | 'start' | |
Specifies side to attach the collapsed toolbar. | ||
string
| undefined | |
Applies specified color to the control - supports utility colors with or without | ||
'default' | 'prominent' | 'comfortable' | 'compact' | 'default' | |
Adjusts the vertical height used by the component. | ||
string | number | undefined | |
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page. | ||
boolean
| null | |
Use this prop to increase the height of the toolbar without using the | ||
string | number | 48 | |
Designate an explicit height for the | ||
boolean
| false | |
Removes the component’s box-shadow. | ||
boolean
| false | |
Applies display: inline-flex to the component. | ||
string | number | 64 | |
Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc. | ||
string
| undefined | |
Specifies a v-img as the component’s background. | ||
'top' | 'bottom' | 'top' | |
Aligns the component towards the top or bottom. | ||
boolean
| true | |
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
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 & {}) | 'hide' | 'fully-hide' | 'inverted' | 'collapse' | 'elevate' | 'fade-image' | undefined | |
Specify an action to take when the scroll position of scroll-target reaches scroll-threshold. Accepts any combination of hide, inverted, collapse, elevate, and fade-image. Multiple values can be used, separated by a space. | ||
string
| undefined | |
The element to target for scrolling events. Uses | ||
string | number | 300 | |
The amount of scroll distance down before scroll-behavior activates. | ||
string | (new () => any) | FunctionalComponent | 'header' | |
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. | ||
string
| undefined | |
Specify a title text for the component. | ||
name | type | |
|---|---|---|
[boolean] | ||
Event that is emitted when the component’s model changes. | ||
Adds an item inside the input and after input content. | ||
The default Vue slot. | ||
Slot positioned directly under the main content of the toolbar. Height of this slot can be set explicitly with the extension-height prop. | ||
Expects the | ||
Adds an item outside the input and before input content. | ||
Slot for the component’s title content. | ||
name | default |
|---|---|
rgb(var(--v-theme-surface)) | |
( $app-bar-border-color, $app-bar-border-style, $app-bar-border-width, $app-bar-border-thin-width ) | |
variables.$border-color-root | |
map.get(variables.$rounded, '0') | |
variables.$border-style-root | |
0 0 thin | |
0 | |
24px | |
112px | |
functions.theme-color('on-surface', var(--v-high-emphasis-opacity)) | |
4px | |
0 | |
8px | |
2 | |
0 | |
inherit | |
cover | |
inherit | |
4px | |
4px | |
128px | |
variables.$border-radius-root | |
9px | |
map.get(variables.$rounded, 'xl') $app-bar-border-radius | |
( $app-bar-background, $app-bar-color ) | |
functions.map-deep-get(variables.$typography, 'headline-medium', 'size') | |
6px 20px | |
.2s variables.$standard-easing |