跳到主要内容

Tabs 标签页

在同一块区域里切换几组平级的内容,一次只看一组。切换的是页面(地址会变)时请用导航,而不是标签页。

基本用法

items 里每一项是一个标签和它的面板。墨线先伸展覆盖新旧两个标签,再向新标签收拢;面板按切换方向滑入。默认只渲染当前面板,面板区的高度在切换时平滑过渡。

项目的基本信息、最近的动态和关键指标都在这里。

受控

value / onChange 受控;defaultValue 指定非受控时的初始标签(默认第一个可用的)。

当前:members

一共 12 位成员,其中 3 位是管理员。邀请链接七天内有效。

手动激活

默认方向键移动焦点的同时就切换(auto)。面板内容加载很重时改用 manual:方向键只移动焦点,按 Enter 或空格才切换。

修改项目名称、可见范围和通知方式。危险操作在页面最下面。

标签很多时

标签列表放不下时在内部横向滚动(原生滚动),切换时会把新标签带进可视范围。需要保留各面板内部状态时传 keepMounted,所有面板都会渲染并叠放,高度取最高的那个。

这里是“动态”面板。

规格

墨线
高 3 · 420ms ease-in-out · 中途拉伸
旧面板
150ms 向反方向滑出 20px
新面板
延迟 110ms · spring 滑入 24px

接口

Tabs

属性类型默认值说明
items*TabItem[]—标签和面板。
value / defaultValuestring—当前标签,受控 / 非受控。默认第一个可用的。
onChange(value: string) => void—切换时。
activation'auto' | 'manual''auto'auto:方向键移动焦点的同时切换;manual:Enter / 空格才切换。
labelstring—标签列表的名字(aria-label)。
keepMountedbooleanfalse所有面板都渲染并叠放,保留各自的内部状态;高度取最高的那个。默认只渲染当前面板。

TabItem

属性类型默认值说明
value*string—唯一标识。
label*ReactNode—标签文字。
contentReactNode—面板内容。
disabledboolean—禁用。

无障碍

  • tablist / tab / tabpanel 三件套,标签用 aria-selected 和 aria-controls 关联面板,面板用 aria-labelledby 指回标签。请用 label 给标签列表起名。
  • 标签列表只有一个 Tab 停靠点。← → 在标签间循环移动,Home End 到首尾;禁用的标签会被跳过。
  • 再按一次 Tab 进入当前面板(面板本身可聚焦,方便读屏从头读内容)。
  • keepMounted 时,叠放的非当前面板不可见、不可聚焦,也不会被读屏读到。
  • 减弱动效时墨线和面板直接到位。