选项卡

v-tabs组件用于隐藏可选项目后面的内容。这也可以用作页面的伪导航(pseudo-navigation),其中标签是链接,选项卡子项是内容。

API

名称
active-class
默认值
'v-tabs__item--active'
类型
string

Components.Tabs.

名称
align-with-title
默认值
false
类型
boolean

v-tabs与工具栏标题对齐

名称
centered
默认值
false
类型
boolean

将选项卡居中

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
fixed-tabs
默认值
false
类型
boolean

v-tabs-item min-width 160px (72px mobile), max-width 264px

名称
grow
默认值
false
类型
boolean

Components.Tabs.

名称
height
默认值
undefined
类型
number | string

设置组件高度

名称
hide-slider
默认值
false
类型
boolean

Components.Tabs.

名称
icons-and-text
默认值
false
类型
boolean

Components.Tabs.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
mandatory
默认值
true
类型
boolean

Components.Tabs.

名称
max
默认值
undefined
类型
number | string

设置最大宽度

名称
mobile-break-point
默认值
1264
类型
number | string

设置指定的移动端断点

名称
multiple
默认值
false
类型
boolean

Components.Tabs.

名称
next-icon
默认值
'$vuetify.icons.next'
类型
string

左分页图标

名称
prev-icon
默认值
'$vuetify.icons.prev'
类型
string

右分页图标

名称
right
默认值
false
类型
boolean

将选项向右侧对齐

名称
show-arrows
默认值
false
类型
boolean

Components.Tabs.

名称
slider-color
默认值
'accent'
类型
string

Components.Tabs.

名称
value
默认值
undefined
类型
number | string

控制可见性

示例

固定选项卡

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-tabsv-toolbar-title组件已知(v-toolbar-side-iconv-btn必须在v-toolbar中使用)。如果标签文本被包装,可能无法正常工作。

长大

grow属性将使选项卡标签占用所有可用空间。

With menu

You can use a menu to hold additional tabs, swapping them out on the fly

分页

如果选项卡标签溢出它们的容器,分页控件将会出现

自定义图标

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore