# Tabs(选项卡)

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

# 使用

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

# API

# 注意

# 示例

# 属性

# 对齐标题

使用 align-with-title prop 将 v-tabs v-toolbar-title对齐(v-app-bar-nav-iconv-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-tabs 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.

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM