UI · №05 · SPECIMEN

标签页Tabs

上面一排可以切换的栏目切换页签点一下换一块内容的那排按钮

LIVE SPECIMEN真的能玩，点点看

本周访问 1,248 次，比上周 +12%

先看结论

一行标签切换同一区域的不同内容面板，同屏只显示一个面板。

适合: 同一对象的多个平行视图（概览/动态/设置）。
不适合: 步骤有先后依赖时——那是 Stepper 向导的活，Tabs 暗示"随便切"。

直接发给 agent

Add a tab bar with three tabs (Overview, Activity, Settings): role="tablist" semantics, arrow-key navigation, an active indicator line that slides to the selected tab, and only the active panel visible.

已于 2026-07-17 实测通过

技术标注2 项

web: role="tablist" + aria-selected + 方向键导航
react: <Tabs>（Radix/shadcn）

详细说明

Tabs 是「平行内容」的容器：几个面板地位相等、随时可切。一旦内容有先后顺序或依赖关系，用 Tabs 就是语义错位——用户不知道该不该按顺序看。