VToolbar API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| Applies position: absolute to the component. | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| collapse | ||
| Puts the toolbar into a collapsed state reducing its maximum width. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| extended | ||
| Use this prop to increase the height of the toolbar without using the extension slot for adding content. May be used in conjunction with the extension-height prop, and any of the other props that affect the height of the toolbar, e.g. prominent, dense, etc., WITH THE EXCEPTION of height. | ||
| extension-height | ||
| Specify an explicit height for the extension slot. | ||
| flat | ||
| Removes the toolbar’s box-shadow. | ||
| floating | ||
| Applies display: inline-flex to the component. | ||
| height | ||
| Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc. | ||
| image | ||
| Specifies a v-img as the component’s background. | ||
| rounded | ||
| 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 . | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| title | ||
| Specify a title text for the component. | ||
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| extension |
| 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. |
| image |
| Expects the v-img component. Scoped props should be applied with v-bind="props". |
| prepend |
| Adds an item outside the input and before input content. |
| title |
| Slot for the component’s title content. |
可用属性
| contentHeight |
| The current height of the component’s content. |
| extensionHeight |
| The current height of the component’s extension slot. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $toolbar-append-btn-margin-end | |
| $toolbar-background | |
| $toolbar-border | |
| $toolbar-border-color | |
| $toolbar-border-radius | |
| $toolbar-border-style | |
| $toolbar-border-thin-width | |
| $toolbar-border-width | |
| $toolbar-btn-icon-size | |
| $toolbar-collapsed-border-radius | |
| $toolbar-collapsed-max-width | |
| $toolbar-color | |
| $toolbar-content-padding-x | |
| $toolbar-content-padding-y | |
| $toolbar-elevation | |
| $toolbar-flat-elevation | |
| $toolbar-flex | |
| $toolbar-prepend-btn-margin-start | |
| $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 | |
| $toolbar-prominent-title-typography | |
| $toolbar-rounded-border-radius | |
| $toolbar-theme | |
| $toolbar-title-extended-padding | |
| $toolbar-title-font-size | |
| $toolbar-title-font-weight | |
| $toolbar-title-letter-spacing | |
| $toolbar-title-line-height | |
| $toolbar-title-margin | |
| $toolbar-title-text-transform | |
| $toolbar-title-typography | |
| $toolbar-transition | |