VNavigationDrawer API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| 给组件应用 position: absolute | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| close-delay | ||
| 组件关闭前等待的毫秒数。仅应用于悬停和焦点事件。 | ||
| 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 . | ||
| disable-resize-watcher | ||
| Prevents the automatic opening or closing of the drawer when resized, based on whether the device is mobile or desktop. | ||
| disable-route-watcher | ||
| Disables opening of navigation drawer when route changes. | ||
| elevation | ||
| 组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。 | ||
| expand-on-hover | ||
| Collapses the drawer to a mini-variant until hovering with the mouse. | ||
| floating | ||
| A floating drawer has no visible container (no border-right). | ||
| image | ||
| Apply a specific background image to the component. | ||
| location | ||
| Controls the edge of the screen the drawer is attached to. | ||
| mobile | ||
| Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint | ||
| mobile-breakpoint | ||
| 为组件设置指定的移动断点。这将为移动设备应用替代样式，如 temporary prop，或在满足断点值时激活 bottom prop。将值设置为 0 将禁用此功能。 | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| name | ||
| Assign a specific name for layout registration. | ||
| open-delay | ||
| 组件打开前等待的毫秒数。仅应用于悬停和焦点事件。 | ||
| order | ||
| Adjust the order of the component in relation to its registration order. | ||
| permanent | ||
| The drawer remains visible regardless of screen size. | ||
| persistent | ||
| Clicking outside or pressing esc key will not dismiss the dialog. | ||
| rail | ||
| Sets the component width to the rail-width value. | ||
| rail-width | ||
| Sets the width for the component when rail is enabled. | ||
| 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 . | ||
| scrim | ||
| Determines whether an overlay is used when a temporary drawer is open. Accepts true/false to enable background, and string to define color. | ||
| sticky | ||
| MISSING DESCRIPTION (edit in github ) | ||
| tag | ||
| 指定在根元素上使用的自定义标签。 | ||
| temporary | ||
| 临时抽屉位于它的应用程序上方，并使用一个scrim（覆盖层）使背景变暗。 | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| touchless | ||
| Disable mobile touch functionality. | ||
| width | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| 当组件的 model-value 更改时引发的事件。 | |
| update:rail | |
| Event that is emitted when the rail model changes. | |
插槽
| append |
| A slot at the bottom of the drawer. |
| default |
| 默认Vue 插槽。 |
| image |
| Used to modify v-img properties when using the src prop. |
| prepend |
| 抽屉顶部的插槽 |
可用属性
| isStuck |
| MISSING DESCRIPTION (edit in github ) |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $navigation-drawer-background | |
| $navigation-drawer-border | |
| $navigation-drawer-border-color | |
| $navigation-drawer-border-radius | |
| $navigation-drawer-border-style | |
| $navigation-drawer-border-thin-width | |
| $navigation-drawer-border-width | |
| $navigation-drawer-color | |
| $navigation-drawer-content-height | |
| $navigation-drawer-content-overflow-x | |
| $navigation-drawer-content-overflow-y | |
| $navigation-drawer-elevation | |
| $navigation-drawer-height | |
| $navigation-drawer-img-height | |
| $navigation-drawer-img-object-fit | |
| $navigation-drawer-img-width | |
| $navigation-drawer-overflow-scrolling | |
| $navigation-drawer-rounded-border-radius | |
| $navigation-drawer-scrim-opacity | |
| $navigation-drawer-temporary-elevation | |
| $navigation-drawer-theme | |
| $navigation-drawer-transition-duration | |
| $navigation-drawer-transition-property | |
| $navigation-drawer-transition-timing-function | |