标签页
Tabs
别名:选项卡tab 切换页签切换标签浏览器那种标签分栏切换
这是什么
用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
名词辨析
Tabs 在同级内容面板间切换（内容同级并列）；Segmented Control 是紧凑的模式/筛选切换；Breadcrumb 显示层级位置。
交互实验室
试一试，再决定怎么用切换外观，再用 ← →、Home、End 切换内容面板。
正在加载实验室…
使用时关注什么
- 01焦点与选中标签同步，面板与标签有语义关联。
- 02切换不会改变页面路由，相关内容留在同一上下文。
从参考到实践
AI 生成的视觉参考 · 点击查看完整图集
✓ 适用场景
- 同一对象的几个平行视图（概览 / 动态 / 设置）
- 想就地切换、避免整页跳转
- 内容高度相关且标签数 ≤ 7
✕ 不适用场景
- 各标签内容不相关，应拆成独立页面或路由
- 需要同时对照两个标签的内容
- 有先后顺序的多步流程（用分步指示器）
常见形式
下划线式
Underline
激活项底部横线，Material 风格
胶囊分段式
Pill / Segmented
圆角分段控件，iOS Segmented 风格
卡片式
Card
标签即页签卡片，与面板连成一体
实现要点
flexborder-bottom: 2px solidtransformtransition语义结构 role="tablist" > role="tab"（aria-selected）+ role="tabpanel" （aria-labelledby，hidden 隐藏非当前面板）。激活指示器用绝对定位小横条， transform: translateX 滑动过渡；面板切换可加轻微 fade。键盘需实现左右 方向键移动焦点（roving tabindex）。
平台 API
role="tablist"role="tab"role="tabpanel"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
组件相似概念用"首页 / 分类 / 子类 / 当前页"的层级路径表示用户在信息架构中所处的位置： 每个上级都可点击跳回，末项为当前页不可点。这是防止用户迷路成本最低的手段， 命名源自童话中沿途撒下用来标记归路的面包屑。常置于页面标题上方。
组件相似概念用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件相似概念由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件相似概念容易混淆
Segmented Control 更紧凑、用于模式/筛选，Tabs 用于内容分区。
Breadcrumb 表达层级路径，Tabs 表达同级切换。
Sidebar 是常驻导航面，Tabs 是内容区内的切换条。