导航抽屉

v-navigation-drawer组件是用户将用来浏览应用程序的内容,导航抽屉被预先配置为可以使用或不使用vue-router

用例

The navigation drawer is primarily used to house links to the pages in your application. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.

API

v-navigation-drawer
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
app
默认值
false
类型
boolean

指定组件作为应用程序布局的一部分,用于动态调整内容的大小

名称
clipped
默认值
false
类型
boolean

剪切的抽屉位于应用程序工具栏下方

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disable-resize-watcher
默认值
false
类型
boolean

调整大小时将自动打开/关闭抽屉,具体取决于手机还是桌面

名称
disable-route-watcher
默认值
false
类型
boolean

当路由改变时禁止打开抽屉导航

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
floating
默认值
false
类型
boolean

浮动抽屉没有可见的容器(没有右边框)

名称
height
默认值
100%
类型
number | string

设置组件高度

名称
hide-overlay
默认值
false
类型
boolean

隐藏叠加层的显示

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
mini-variant
默认值
false
类型
boolean

凝结导航抽屉宽度,也接受.sync修饰符。这样,抽屉在点击时会重新打开

名称
mini-variant-width
默认值
80
类型
number | string

指定mini属性开期时指定的宽度

名称
mobile-break-point
默认值
1264
类型
number | string

设置指定的移动端断点

名称
permanent
默认值
false
类型
boolean

不管屏幕尺寸如何,抽屉都可以看到

名称
right
默认值
false
类型
boolean

将抽屉放置在右侧

名称
stateless
默认值
false
类型
boolean

删除所有自动状态功能(调整大小、移动、路由)并手动控制抽屉状态。

名称
temporary
默认值
false
类型
boolean

临时抽屉位于其应用之上,并使用稀松布(叠加)来使背景变暗

名称
touchless
默认值
false
类型
boolean

禁用移动触摸功能

名称
value
默认值
undefined
类型
any

控制可见性

名称
width
默认值
300
类型
number | string

内容的宽度

示例

彩色的抽屉

导航抽屉可以定制,以适应任何应用程序的设计。虽然让和组件都可以在抽屉中使用,但是您使用的主要组件是v-list、所有列表自组建和v-divider

永久浮动抽屉

导航抽屉可以放置在卡片内并浮在内容背景上。

头像

由于抽屉支持v-list组件,您可以轻松创建自定义的仪表板解决方案。

迷你

导航抽屉也有一个小型变体,可以使用mini-variant.sync来控制。

临时的

临时抽屉位于其应用之上,并使用稀松布(叠加)来使背景变暗。这个抽屉的行为是模仿在移动设备时的持续抽屉。点击抽屉外部会导致关闭。

暗黑主题

Vuetify也支持暗黑的应用程序主题,这不会覆盖具有默认主题的主键,因此在某些情况下,需要手动设置为暗黑主题。

Combined drawers

Drawers are flexible and are easily adapted to any use-case.

Nested lists

List tiles can be nested a second level for even more options for your navigation

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore