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 / defaultValue | string | — | 当前标签,受控 / 非受控。默认第一个可用的。 |
onChange | (value: string) => void | — | 切换时。 |
activation | 'auto' | 'manual' | 'auto' | auto:方向键移动焦点的同时切换;manual:Enter / 空格才切换。 |
label | string | — | 标签列表的名字(aria-label)。 |
keepMounted | boolean | false | 所有面板都渲染并叠放,保留各自的内部状态;高度取最高的那个。默认只渲染当前面板。 |
TabItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value* | string | — | 唯一标识。 |
label* | ReactNode | — | 标签文字。 |
content | ReactNode | — | 面板内容。 |
disabled | boolean | — | 禁用。 |
无障碍
tablist/tab/tabpanel三件套,标签用aria-selected和aria-controls关联面板,面板用aria-labelledby指回标签。请用label给标签列表起名。- 标签列表只有一个 Tab 停靠点。← → 在标签间循环移动,Home End 到首尾;禁用的标签会被跳过。
- 再按一次 Tab 进入当前面板(面板本身可聚焦,方便读屏从头读内容)。
- keepMounted 时,叠放的非当前面板不可见、不可聚焦,也不会被读屏读到。
- 减弱动效时墨线和面板直接到位。