选项卡
v-tabs
组件用于隐藏可选项目后面的内容。这也可以用作页面的伪导航(pseudo-navigation),其中标签是链接,选项卡子项是内容。
API
Components.Tabs.
让v-tabs
与工具栏标题对齐
将选项卡居中
将指定的色彩应用与控件
应用暗黑主题变体
v-tabs-item
min-width 160px (72px mobile), max-width 264px
Components.Tabs.
设置组件高度
Components.Tabs.
Components.Tabs.
应用明亮主题变体
Components.Tabs.
设置最大宽度
设置指定的移动端断点
Components.Tabs.
左分页图标
右分页图标
将选项向右侧对齐
Components.Tabs.
Components.Tabs.
控制可见性
示例
固定选项卡
fixed-tabs属性设置一个较高的最小宽度,并将一个新的最大宽度应用于v-tabs-items
。在桌面屏幕上,选项卡标签项目将在v-tabs
组件中居中,切换到移动设备时则均匀填充。
Right aligned tabs
The right prop aligns the tabs to the right
内容
选项卡不是您在v-tabs
组件中唯一可以放置的东西。在这个例子中,我们还添加了一个工具栏。
搜索框
这是在v-tabs
中添加内容的另一个例子。
图标和文本
通过使用icons-and-text属性,您可以为每个选项卡标签项添加图标。
桌面选项卡
与工具栏标题对齐选项卡
使v-tabs
和v-toolbar-title
组件已知(v-toolbar-side-icon
或v-btn
必须在v-toolbar
中使用)。如果标签文本被包装,可能无法正常工作。
长大
grow属性将使选项卡标签占用所有可用空间。
With menu
You can use a menu to hold additional tabs, swapping them out on the fly
分页
如果选项卡标签溢出它们的容器,分页控件将会出现
自定义图标
prev-icon和next-icon可以用来设置分页器的自定义图标