导航抽屉
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
给元素设置绝对定位
指定组件作为应用程序布局的一部分,用于动态调整内容的大小
剪切的抽屉位于应用程序工具栏下方
应用暗黑主题变体
调整大小时将自动打开/关闭抽屉,具体取决于手机还是桌面
当路由改变时禁止打开抽屉导航
给元素设置固定定位
浮动抽屉没有可见的容器(没有右边框)
设置组件高度
隐藏叠加层的显示
应用明亮主题变体
凝结导航抽屉宽度,也接受.sync修饰符。这样,抽屉在点击时会重新打开
指定mini
属性开期时指定的宽度
设置指定的移动端断点
不管屏幕尺寸如何,抽屉都可以看到
将抽屉放置在右侧
删除所有自动状态功能(调整大小、移动、路由)并手动控制抽屉状态。
临时抽屉位于其应用之上,并使用稀松布(叠加)来使背景变暗
禁用移动触摸功能
控制可见性
内容的宽度
示例
彩色的抽屉
导航抽屉可以定制,以适应任何应用程序的设计。虽然让和组件都可以在抽屉中使用,但是您使用的主要组件是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