VAppBar API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| 应用 position: absolute 样式到组件. | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| collapse | ||
| Morphs the component 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 | ||
| 调整组件使用的垂直高度。 | ||
| elevation | ||
| 组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。 | ||
| extended | ||
| 使用此道具可以增加工具栏的高度，而 不需要 使用 extension 插槽来添加内容。可以与 extension-height 属性，以及其他会影响工具栏高度的其他属性，例如 prominent, dense 等配合使用，height 除外。 | ||
| extension-height | ||
| Designate an explicit height for the extension slot. | ||
| flat | ||
| Removes the component’s box-shadow. | ||
| floating | ||
| 将 display: inline-flex 应用于组件。 | ||
| height | ||
| 指定工具栏的特定高度。覆盖其他 props 所施加的高度，例如 prominent, dense, extended。 | ||
| image | ||
| 指定 v-img 作为组件背景。 | ||
| location | ||
| Aligns the component towards the top or bottom. | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| name | ||
| Assign a specific name for layout registration. | ||
| order | ||
| Adjust the order of the component in relation to its registration order. | ||
| 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 . | ||
| scroll-behavior | ||
| 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. | ||
| scroll-target | ||
| The element to target for scrolling events. Uses window by default. | ||
| scroll-threshold | ||
| The amount of scroll distance down before scroll-behavior activates. | ||
| tag | ||
| 指定在根元素上使用的自定义标签。 | ||
| 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. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| 当组件的 model-value 更改时引发的事件。 | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| 默认Vue 插槽。 |
| extension |
| Slot positioned directly under the main content of the toolbar. Height of this slot can be set explicitly with the extension-height prop. |
| image |
| Expects the v-img component. |
| prepend |
| Adds an item outside the input and before input content. |
| title |
| Slot for the component’s title content. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $app-bar-background | |
| $app-bar-border | |
| $app-bar-border-color | |
| $app-bar-border-radius | |
| $app-bar-border-style | |
| $app-bar-border-thin-width | |
| $app-bar-border-width | |
| $app-bar-collapsed-border-radius | |
| $app-bar-collapsed-max-width | |
| $app-bar-color | |
| $app-bar-density-comfortable-padding | |
| $app-bar-density-compact-padding | |
| $app-bar-density-default-padding | |
| $app-bar-elevation | |
| $app-bar-flat-elevation | |
| $app-bar-image-height | |
| $app-bar-image-object-fit | |
| $app-bar-image-width | |
| $app-bar-padding-end | |
| $app-bar-padding-start | |
| $app-bar-prominent-height | |
| $app-bar-rounded-border-radius | |
| $app-bar-scrolled-title-padding-bottom | |
| $app-bar-shaped-border-radius | |
| $app-bar-theme | |
| $app-bar-title-font-size | |
| $app-bar-title-padding | |
| $app-bar-transition | |