# Tabs(选项卡)
v-tab
组件用于将内容隐藏在可选择的项目后面。 这也可以用作页面的伪导航,其中选项卡是链接,选项卡项是内容。
# 使用
v-tabs
组件是 v-item-group 的样式扩展。 它提供了一个易于使用的接口来组织内容组。
# API
# 注意
当使用 dark 属性和 不 提供自定义 color 时,v-tabs
组件会将其颜色默认为 white。
当使用包含必填输入字段的 v-tab-item
时,你必须使用 eager prop 来验证尚未显示的必填字段。
# 示例
# 属性
# 对齐标题
使用 align-with-title prop 将 v-tabs
v-toolbar-title
对齐(v-app-bar-nav-icon
或 v-btn
必须在 v-toolbar
中使用)。
# 激活项居中
The center-active prop will make the active tab always centered
# 自定义分隔符
prev-icon and next-icon can be used for applying custom pagination icons.
# 固定选项卡
The fixed-tabs prop forces v-tab
to take up all available space up to the maximum width (300px).
# 增长
The grow prop will make the tab items take up all available space up to a maximum width of 300px.
# 图标和文本
Using icons-and-text prop increases the v-tabs
height to 72px to allow for both icons as well as text to be used.
# Pagination(分页)
If the tab items overflow their container, pagination controls will appear on desktop. For mobile devices, arrows will only display with the show-arrows prop.
# 右对齐
The right prop aligns the tabs to the right.
# 垂直标签页
The vertical prop allows for v-tab
components to stack vertically.
# 其他
# 内容
It is common to put v-tabs
inside the extension slot of v-toolbar
. Using v-toolbar
's tabs prop auto adjusts its height to 48px to match v-tabs
.
# 桌面选项卡
You can represent v-tab
actions by using single icons. This is useful when it is easy to correlate content to each tab.
# 动态高度
When changing your v-tab-item
, the content area will smoothly scale to the new size.
# 动态标签
Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs
component will react. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all v-tab
s and the slider will disappear.
# 溢出到菜单
You can use a menu to hold additional tabs, swapping them out on the fly.
# 标签项
The v-tabs-items
component allows for you to customize the content per tab. Using a shared v-model
, the v-tabs-items
will sync with the currently selected v-tab
.