Vuetify

商店

企业版

v-tabs 组件用于将内容隐藏在可选项之后。这还可以用作页面的伪导航,其中选项卡是链接,选项卡项是内容。

v-tabs 组件是 v-item-group 的样式扩展。它提供了一个易于使用的接口来组织内容组。

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

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

fixed-tabs 属性强制 v-tab 占用所有可用空间,直到最大宽度(300px)。

活动选项卡总是居中

v-tabs-items 组件允许你自定义每个标签的内容。使用共享的 v-modelv-tabs-items 将与当前选择的 v-tab 同步。

grow 属性将使选项卡项目占用所有可用空间,最大宽度为 300px。

如果选项卡项目超出其容器,则分页控件将出现在桌面设备。 对于移动设备,箭头将仅与 show-arrows 属性一起显示。

prev-icon 和* next-icon* 可以用来设置分页器的自定义图标

标签可以切换为垂直堆叠其 v-tab 组件。

v-tab 可以包含图标和文本。这将 v-tabs 的高度增加到 72px。

right属性将选项卡向右对齐。

通常把 v-tabs 放在 v-toolbarextension 插槽内。使用 v-toolbartabs 属性自动调整其高度为 48px,以匹配 v-tabs

v-tabsv-toolbar-title 组件对齐(v-toolbar 中必须使用 v-app-bar-nav-iconv-btn )。

选项卡可以动态添加和删除。 这使您可以更新为任意数量,并且 v-tabs 组件会做出反应。 在此示例中,当我们添加新标签时,我们会自动更改模型以使其匹配。 随着我们添加更多标签并溢出容器,所选项目将自动滚动到视图中。 删除所有的 v-tabs,滑块将消失。

更改 v-tab-item 时,内容区域将平滑缩放到新的大小。

你可以用单个图标来表示 v-tab 的操作。当很容易将内容与每个选项卡关联起来时,这是很有用的。

您可以使用菜单来保存额外的选项卡,动态地将它们交换出来。

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