Tabs
Tabs 将内容组织为多个独立视图，同一时间只显示一个视图。每个标签页都会触发其对应的面板。
默认的 navigation 变体面向桌面导航，包含外框和选中容器。若需更轻量、紧凑的标签栏，可使用透明的 line 变体，其下划线宽度与文本相同。添加 divider 可显示底部分隔线；与 divider-full-width 配合使用时，分隔线会延伸至整个 Tabs 根元素。
Tabs 默认根据内容确定宽度。仅当标签页需要平分并填满可用宽度时使用 mode="fixed"；如果每个标签页需要保留最小触控区域并允许水平溢出，则使用 mode="scrollable"。
Tabs 基于 useTabs composable 构建：键盘导航、ARIA 属性和值管理等交互逻辑由该 composable 负责，组件则提供 MD3 样式。详情请参阅 Composables。
示例
默认
线条变体
禁用 Tab
禁用的标签页不会响应指针交互，也不会进入键盘 Tab 顺序；方向键导航会跳过它们。
带图标s
路由链接
使用与 Button 和 ListItem 相同的 RouterLink custom 模式，然后将生成的 href 和 navigate 处理函数传给 Tab。
无头模式（仅 useTabs）
直接使用 useTabs composable 构建自定义标签页界面，不受预设样式限制。
默认标签图标会根据尺寸对应的排版角色和密度调整大小。--md-tabs-icon-size 可设置最终尺寸。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<component> | trigger | [data-scope="tabs"][data-part="trigger"]鼠标左键单击复制 |
<span> | trigger-content | [data-scope="tabs"][data-part="trigger-content"]鼠标左键单击复制 |
<span> | trigger-icon条件显示 | [data-scope="tabs"][data-part="trigger-icon"]鼠标左键单击复制 |
<span> | trigger-label | [data-scope="tabs"][data-part="trigger-label"]鼠标左键单击复制 |
<div> | list | [data-scope="tabs"][data-part="list"]鼠标左键单击复制 |
<span> | indicator | [data-scope="tabs"][data-part="indicator"]鼠标左键单击复制 |
<div> | panel | [data-scope="tabs"][data-part="panel"]鼠标左键单击复制 |
<div> | root | [data-scope="tabs"][data-part="root"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
variant可选 | Visual variant of the tabs. navigationline | "navigation" | |
divider可选 | Whether the line variant shows a divider below the tab list. boolean | undefined | false | |
dividerFullWidth可选 | Whether the line variant divider spans the full width of the Tabs root. boolean | undefined | false | |
size可选 | Size of the tab triggers. extra-smallsmallmediumlargeextra-large | "medium" | |
mode可选 | Layout mode for the tab list. autofixedscrollable | "auto" | |
orientation可选 | The orientation of the tab list. horizontalvertical | "horizontal" | |
loop可选 | Whether arrow-key navigation loops. boolean | undefined | true | |
selectWhenFocused可选 | Whether focusing a trigger selects it. boolean | undefined | true | |
modelValue可选 | - string | undefined | - |
事件1
| 名称 | 类型 | 说明 |
|---|---|---|
update:modelValue | [value: string | undefined] | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Tabs content: Tab triggers and TabPanel components. |
样式79
| Token | 说明 |
|---|---|
--md-tabs-active-container-colorColor回退值 transparent | Controls active container color. |
--md-tabs-active-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls active container elevation. |
--md-tabs-active-container-outline-colorColor回退值 transparent | Controls active container outline color. |
--md-tabs-active-container-outline-widthLayout回退值 0rem | Controls active container outline width. |
--md-tabs-active-container-shapeShape回退值 var(--md-shape-docked) | Controls active container shape. |
--md-tabs-active-focus-label-colorFocus回退值 var(--md-sys-color-primary) | Controls active focus label color. |
--md-tabs-active-focus-state-layer-colorFocus回退值 var(--md-sys-color-primary) | Controls active focus state layer color. |
--md-tabs-active-focus-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls active focus state layer opacity. |
--md-tabs-active-hover-label-colorState回退值 var(--md-sys-color-primary) | Controls active hover label color. |
--md-tabs-active-hover-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls active hover state layer color. |
--md-tabs-active-hover-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls active hover state layer opacity. |
--md-tabs-active-indicator-colorColor回退值 var(--md-sys-color-primary) | Controls active indicator color. |
--md-tabs-active-indicator-heightLayout回退值 0.1875rem | Controls active indicator height. |
--md-tabs-active-indicator-minimum-sizeLayout回退值 1.5rem | Controls active indicator minimum size. |
--md-tabs-active-indicator-shapeShape回退值 0.1875rem 0.1875rem 0 0 | Controls active indicator shape. |
--md-tabs-active-label-colorColor回退值 var(--md-sys-color-primary) | Controls active label color. |
--md-tabs-active-pressed-label-colorState回退值 var(--md-sys-color-primary) | Controls active pressed label color. |
--md-tabs-active-pressed-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls active pressed state layer color. |
--md-tabs-active-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls active pressed state layer opacity. |
--md-tabs-active-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls active state layer color. |
--md-tabs-compact-container-heightLayout回退值 2.5rem | Controls compact container height. |
--md-tabs-compact-tab-padding-inlineLayout回退值 0.625rem | Controls compact tab padding inline. |
--md-tabs-compact-with-icon-and-label-container-heightLayout回退值 3.5rem | Controls compact with icon and label container height. |
--md-tabs-container-colorColor回退值 var(--md-sys-color-surface) | Controls container color. |
--md-tabs-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls container elevation. |
--md-tabs-container-gapLayout回退值 0rem | Controls container gap. |
--md-tabs-container-heightLayout回退值 3rem | Controls container height. |
--md-tabs-container-paddingLayout回退值 0rem | Controls container padding. |
--md-tabs-container-shapeShape回退值 var(--md-shape-docked) | Controls container shape. |
--md-tabs-divider-colorColor回退值 var(--md-sys-color-surface-variant) | Controls divider color. |
--md-tabs-divider-thicknessLayout回退值 0.0625rem | Controls divider thickness. |
--md-tabs-focus-indicator-colorFocus回退值 var(--md-sys-color-secondary) | Controls focus indicator color. |
--md-tabs-focus-indicator-outline-offsetFocus回退值 var(--md-sys-state-focus-indicator-inner-offset) | Controls focus indicator outline offset. |
--md-tabs-focus-indicator-shapeFocus回退值 var(--md-shape-card) | Controls focus indicator shape. |
--md-tabs-focus-indicator-thicknessFocus回退值 var(--md-sys-state-focus-indicator-thickness) | Controls focus indicator thickness. |
--md-tabs-icon-label-spaceLayout回退值 0.5rem | Controls icon label space. |
--md-tabs-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 1.5rem) | Controls icon size. |
--md-tabs-inactive-focus-label-colorFocus回退值 var(--md-sys-color-on-surface) | Controls inactive focus label color. |
--md-tabs-inactive-focus-state-layer-colorFocus回退值 var(--md-sys-color-on-surface) | Controls inactive focus state layer color. |
--md-tabs-inactive-focus-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls inactive focus state layer opacity. |
--md-tabs-inactive-hover-label-colorState回退值 var(--md-sys-color-on-surface) | Controls inactive hover label color. |
--md-tabs-inactive-hover-state-layer-colorState回退值 var(--md-sys-color-on-surface) | Controls inactive hover state layer color. |
--md-tabs-inactive-hover-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls inactive hover state layer opacity. |
--md-tabs-inactive-label-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls inactive label color. |
--md-tabs-inactive-pressed-label-colorState回退值 var(--md-sys-color-on-surface) | Controls inactive pressed label color. |
--md-tabs-inactive-pressed-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls inactive pressed state layer color. |
--md-tabs-inactive-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls inactive pressed state layer opacity. |
--md-tabs-inactive-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls inactive state layer color. |
--md-tabs-indicator-animation-durationMotion回退值 250ms | Controls indicator animation duration. |
--md-tabs-indicator-animation-easingMotion回退值 cubic-bezier(0.2,0,0,1) | Controls indicator animation easing. |
--md-tabs-indicator-fade-durationMotion回退值 150ms | Controls indicator fade duration. |
--md-tabs-label-text-fontTypography回退值 var(--md-sys-typescale-title-small-font) | Controls label text font. |
--md-tabs-label-text-line-heightTypography回退值 var(--md-sys-typescale-title-small-line-height) | Controls label text line height. |
--md-tabs-label-text-sizeLayout回退值 var(--md-sys-typescale-title-small-size) | Controls label text size. |
--md-tabs-label-text-trackingTypography回退值 var(--md-sys-typescale-title-small-tracking) | Controls label text tracking. |
--md-tabs-label-text-weightTypography回退值 var(--md-sys-typescale-title-small-weight) | Controls label text weight. |
--md-tabs-scrollable-tab-min-widthLayout回退值 4.5rem | Controls scrollable tab min width. |
--md-tabs-tab-max-widthLayout回退值 16.5rem | Controls tab max width. |
--md-tabs-tab-padding-inlineLayout回退值 0.75rem | Controls tab padding inline. |
--md-tabs-tonal-active-container-colorColor回退值 var(--md-sys-color-surface-container-lowest) | Controls tonal active container color. |
--md-tabs-tonal-active-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls tonal active container elevation. |
--md-tabs-tonal-active-container-outline-colorColor回退值 rgb(from var(--md-sys-color-outline-variant)r g b / 0.6) | Controls tonal active container outline color. |
--md-tabs-tonal-active-container-outline-widthLayout回退值 0.0625rem | Controls tonal active container outline width. |
--md-tabs-tonal-active-container-shapeShape回退值 var(--md-shape-chip) | Controls tonal active container shape. |
--md-tabs-tonal-active-label-colorColor回退值 var(--md-sys-color-on-surface) | Controls tonal active label color. |
--md-tabs-tonal-active-state-layer-colorState回退值 var(--md-sys-color-outline) | Controls tonal active state layer color. |
--md-tabs-tonal-compact-container-heightLayout回退值 2.25rem | Controls tonal compact container height. |
--md-tabs-tonal-compact-container-paddingLayout回退值 0.1875rem | Controls tonal compact container padding. |
--md-tabs-tonal-compact-tab-padding-inlineLayout回退值 0.75rem | Controls tonal compact tab padding inline. |
--md-tabs-tonal-container-colorColor回退值 var(--md-sys-color-surface-container) | Controls tonal container color. |
--md-tabs-tonal-container-gapLayout回退值 0.125rem | Controls tonal container gap. |
--md-tabs-tonal-container-heightLayout回退值 2.75rem | Controls tonal container height. |
--md-tabs-tonal-container-paddingLayout回退值 0.25rem | Controls tonal container padding. |
--md-tabs-tonal-container-shapeShape回退值 var(--md-shape-card) | Controls tonal container shape. |
--md-tabs-tonal-hover-label-colorState回退值 var(--md-sys-color-on-surface) | Controls tonal hover label color. |
--md-tabs-tonal-inactive-label-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls tonal inactive label color. |
--md-tabs-tonal-state-layer-colorState回退值 var(--md-color-on-container) | Controls tonal state layer color. |
--md-tabs-tonal-tab-padding-inlineLayout回退值 1rem | Controls tonal tab padding inline. |
--md-tabs-with-icon-and-label-container-heightLayout回退值 4.5rem | Controls with icon and label container height. |
Tab
属性
| 名称 | 说明 | 默认值 |
|---|---|---|
value必填 | The value that identifies this tab. string | - |
href可选 | Optional href. When provided, the tab trigger renders as an anchor. string | undefined | undefined |
disabled可选 | Whether this tab is disabled. boolean | undefined | false |
插槽2
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Tab label content. |
icon | - | Optional icon slot. |
TabList
属性
| 名称 | 说明 | 默认值 |
|---|---|---|
ariaLabel可选 | Accessible label for the tab list. string | undefined | undefined |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | - |
TabPanel
属性
| 名称 | 说明 | 默认值 |
|---|---|---|
value必填 | The value that identifies which tab this panel belongs to. string | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | - |
Composable
useTabs
完整类型签名
function useTabs<T extends string = string>(options?: UseTabsOptions<T>): UseTabsReturn<T>来源：src/composables/useTabs.ts
| 字段 | 类型 | 必填 | 说明 | 默认值 |
|---|---|---|---|---|
value | MaybeRefOrGetter<T | undefined> | 否 | The current active tab value. Can be a ref, getter, or static value. | - |
onValueChange | ((value: T) => void) | undefined | 否 | Called when the active tab changes. | - |
orientation | MaybeRefOrGetter<"horizontal" | "vertical"> | undefined | 否 | The orientation of the tab list. | 'horizontal' |
loop | MaybeRefOrGetter<boolean> | undefined | 否 | Whether arrow-key navigation loops around. | true |
selectWhenFocused | MaybeRefOrGetter<boolean> | undefined | 否 | Whether focusing a trigger selects it. | true |
id | MaybeRefOrGetter<string> | undefined | 否 | Stable base id used to build aria ids for triggers/panels. | - |
| 字段 | 类型 | 必填 | 说明 | 默认值 |
|---|---|---|---|---|
value | ComputedRef<T | undefined> | 是 | The currently selected tab value. | - |
setValue | (value: T) => void | 是 | Set the active tab value. | - |
orientation | ComputedRef<"horizontal" | "vertical"> | 是 | Resolved orientation. | - |
triggerListAttrs | ComputedRef<Record<string, unknown>> | 是 | Attributes to spread on the tab-list container. | - |
getTriggerAttrs | (value: T) => Record<string, unknown> | 是 | Get attributes for a single tab trigger. | - |
getPanelAttrs | (value: T) => Record<string, unknown> | 是 | Get attributes for a single tab panel. | - |
id | string | 是 | Unique instance id (for aria id generation). | - |