VToolbar 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 | |
Puts the toolbar 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 | |
Specify an explicit height for the | ||
boolean
| false | |
Removes the toolbar’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. | ||
Anchor | undefined | |
Specifies the component’s location. Can combine by using a space separated string. Requires the absolute prop. | ||
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 | '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. | ||
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. If this slot has no content, the extended prop may be used instead. | ||
Expects the v-img component. Scoped props should be applied with | ||
Adds an item outside the input and before input content. | ||
Slot for the component’s title content. | ||
The current height of the component’s content. | ||
The current height of the component’s extension slot. | ||
name | default |
|---|---|
4px | |
rgb(var(--v-theme-surface-light)) | |
( $toolbar-border-color, $toolbar-border-style, $toolbar-border-width, $toolbar-border-thin-width ) | |
settings.$border-color-root | |
map.get(settings.$rounded, 0) | |
settings.$border-style-root | |
thin | |
0 | |
48px | |
24px | |
112px | |
functions.theme-color('on-surface-light', var(--v-high-emphasis-opacity)) | |
16px | |
4px | |
0 | |
0 | |
none | |
4px | |
1.5rem | |
400 | |
0 | |
2.25rem | |
none | |
( $toolbar-prominent-title-font-size, $toolbar-prominent-title-font-weight, $toolbar-prominent-title-letter-spacing, $toolbar-prominent-title-line-height, $toolbar-prominent-title-text-transform ) | |
variables.$border-radius-root | |
( $toolbar-background, $toolbar-color ) | |
56px | |
1.25rem | |
400 | |
0 | |
1.75rem | |
20px | |
none | |
( $toolbar-title-font-size, $toolbar-title-font-weight, $toolbar-title-letter-spacing, $toolbar-title-line-height, $toolbar-title-text-transform ) | |
.2s variables.$standard-easing |