Vuetify

商店

企业版

v-navigation-drawer 组件是用户将用来浏览应用程序的组件。 导航抽屉已预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的,一些示例被包装在 v-card 元素中。 在您的应用程序中,通常会将 v-navigation-drawer 直接放置在 v-app 的下面。

导航抽屉主要用于存放指向应用程序页面的链接。 将 null 用作其 v-model 的起始值会将抽屉初始化为在移动设备上关闭,在桌面上打开。 通常使用 nav 属性将抽屉与 v-list 组件配对。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

导航抽屉可以定制,以适应任何应用程序的设计。这里,我们使用 append 插槽应用自定义背景颜色和附加的内容区域。

默认情况下,导航抽屉的右边框为 1px,将其与内容分开。 在此示例中,我们要从左侧拆下抽屉,让它自己浮动。 floating 属性删除右边框(如果使用 right,则删除左边框)。

当使用 mini-variant prop 时,抽屉会缩小(默认 56px),并隐藏 v-list 中除了第一个元素之外的所有内容。在这个例子中,我们使用了 .sync 修改器,它允许我们以程序化的方式绑定抽屉的扩展/收缩。

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

导航抽屉也可以位于应用程序(或元素)的右侧。 这对于创建带有辅助信息(可能没有任何导航链接)的侧页很有用。 使用 RTL 时,必须为抽屉明确定义 right

将组件置于 mini-variant 模式,并在悬停后展开。 不更改内容区域。 宽度可以通过 mini-variant-width 属性进行控制。

将自定义背景应用于抽屉。 如果您需要自定义 v-img 的属性,则可以使用 img 插槽。

在此示例中,我们定义了一个自定义宽度来容纳我们的嵌套抽屉。 使用 v-row,我们确保抽屉和列表在水平方向上彼此相邻。

使用 bottom 属性,我们可以在移动设备上重新定位我们的抽屉,让它从屏幕的底部出来。这是另一种样式,只在遇到 mobile-breakpoint 时激活。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!