选项卡 (Tabs)

v-tabs 组件用来隐藏那些未选择的选项卡。这个组件可用于制作非页面切换导航，即将选项卡作为链接，将选项卡内容作为页面内容。

使用

v-tabs 组件实际是 v-slide-group 的扩展版本。它为将内容分隔至不同区域提供了方便的接口。

API

组件	描述
v-tabs	主要组件
v-tab	用于控制 v-tabs 状态的子组件

示例

属性

对齐选项卡

align-tabs 属性会将选项卡与其容器的start, center, or end对齐。

将选项卡与标题对齐

通过将 align-tabs 属性设置为 title ，使 v-tabs 与 v-toolbar-title 组件对齐（v-app-bar-nav-icon 或 v-btn 必须在 v-toolbar 中使用）。

激活项居中

center-active 属性将使活动选项卡始终居中。

自定义翻页图标

prev-icon 和 next-icon 属性可以用来自定义翻页按钮的图标。

固定选项卡

fixed-tabs 属性会使 v-tab 选项卡项目占据至多 300px 的空间，并且在其中居中

扩展选项卡

grow 属性将使选项卡没有限制地占据所有可用空间。

堆叠式选项卡 (Stacked)

stacked 属性将 v-tabs 的高度提至 72px，允许同时显示图标和文字。

分页 (Pagination)

如果选项卡数量超过了它们的容器宽度，对于桌面设备，会出现翻页控制组件。而对于移动端设备则不会出现，如果要强制出现，请加上 show-arrows 属性。

垂直的选项卡

direction 属性允许 v-tab 组件纵向堆叠。

杂项

内容

通常将 v-tabs 置于 v-toolbar 的 extension 插槽中。

移动设备的选项卡

在移动设备上，你可以使用仅有图标的 v-tab 组件来节约空间。

动态标签

选项卡可以动态添加和移除。在下面的例子中，当我们添加新的选项卡时，改变了 v-model 对应的值。当我们添加的选项卡超过了容器的宽度，会自动滚动到激活的选项卡上。移除所有的 v-tab 选项卡项时，滚动标记则会移除。

溢出到菜单

你也可以使用菜单组件来放置多余的选项卡，改变它们的排布方式。

插槽

选项卡和窗口项目

将 tab 和 item 插槽与 items 属性结合使用，以减少构建选项卡所需的标记。

TIP

This feature was introduced in v3.6.0 (Nebula)