抽屉式导航 (Navigation drawers)

v-navigation-drawer 是您的用户用于导航应用程序的组件。

使用

导航抽屉主要用于存放应用程序中页面的链接，并且已预先配置为可以立即使用或不使用 vue-router。使用 null 作为其 v-model 的起始值会将抽屉初始化为在移动设备上关闭并在桌面上打开。将 nav 与 v-list 组件配对是很常见的 使用 nav 属性的组件。

TIP

为了展示，一些示例被包装在 v-card 元素中。在您的应用程序中，通常会将 v-navigation-drawer 直接作为 v-app 的子元素。

<template>
  <v-app>
    <v-navigation-drawer />
  </v-app>
</template>

API

组件	描述
v-navigation-drawer	Primary Component
v-list-item	Component used to create navigation links

注意

INFO

expand-on-hover 属性并不会改变 v-main 的宽度。要想其根据 expand-on-hover 发生改变，需要绑定 v-model:rail 至 data 属性上。

示例

属性

底部抽屉

使用 bottom 属性，我们可以将抽屉在移动设备上重新定位为从屏幕底部出现。这是一种替代样式，仅在达到 mobile-breakpoint 时激活。

悬停时扩展

将组件置于 rail 模式，悬停时展开。这 does not 改变 v-main 的内容区域。宽度可以通过 rail-width 属性控制。

背景图像

通过 image 属性为抽屉应用自定义背景。如果需要进一步自定义，可以使用 image 插槽并渲染您自己的 v-img。

窄型变化效果

当使用 rail 属性时，抽屉会收缩它的宽度（默认为 56px），隐藏 v-list 中除了第一个元素的其他元素。

浮动

默认情况下，导航抽屉有一个1像素的右边框，将其与内容分开。在这个例子中，我们希望将抽屉从左侧分离，让它独立浮动。floating 属性会移除右边框（如果使用 position 属性，则移除左边框）

Location

导航抽屉还可以使用 location 属性定位在应用程序（或元素）的另一侧。这对于创建没有导航链接的辅助信息侧边栏非常有用。

临时的

临时抽屉位于应用程序上方，并使用遮罩层（overlay）使背景变暗。在移动设备上，这种抽屉行为是默认模拟的。点击抽屉外部会导致其关闭。

其他

彩色的抽屉

导航抽屉可以自定义以适应任何应用程序的设计。在这里，我们应用了自定义背景颜色，并使用 append 插槽添加了一个附加内容区域。

Multiple drawers

在这个例子中，我们定义了两个导航抽屉，一个使用 rail ，另一个不使用。