标签页Tabs
内容与数据展示在同一页切换几组平级内容
标签页适合在同一个对象下切换概览、配置和日志等内容。当前标签要清楚，切换时要决定是否保留输入状态；内容本质上属于不同页面时，应改用导航菜单。
全部 24 个项目
什么时候用
- 同一页面切换几组平级内容：全部 / 进行中 / 已完成全部待付款已完成
- 详情页内容分块：概览、配置、日志，不用来回跳页概览配置日志
- 组数不多（2~5 组）且用户会频繁来回看评论历史收藏不用跳转，点一下就换内容
- 标签文案短而直白，2~4 个字一眼扫完全部进行完成
什么时候不用
- 内容是有先后顺序的流程 → 用 步骤条 Steps 更合适1填写信息2确认订单3完成支付
- 标签太多放不下 → 换成 导航菜单 Menu 或 选择器 Select放不下的标签会被挤没
- 两组内容需要左右对照 → 并排展示，别藏进标签左右分栏，两边同时对照
- 标签里放着未保存的表单，一切换内容就丢基本信息高级设置还没保存的内容…切走标签，填的内容没了
组成结构 · Anatomy
进行中的 6 个项目…
1标签页Tabs整组标签 + 面板的容器
2标签项Tab可点击切换，文案要短
3当前标签Active Tab高亮 + 下划线，告诉用户现在在哪
4内容面板Tab Panel当前标签对应的内容区
常见变体 · Variants
线条型Line
全部 24 个项目
默认款，下划线轻，不抢内容风头
卡片型Card
全部进行中已完成
想让标签分组感更强、更像独立区块
胶囊型Capsule
全部进行中已完成
放在工具栏等小空间，更轻巧
典型使用场景
列表状态筛选
官网首页改版进行中
设计规范文档已完成
移动端适配未开始
设置页分块
设置
林小hu绑定邮箱you@example.com
详情页 概览 / 配置 / 日志
vibe-ui-guide运行中
14:32:05 build completed in 3.2s
14:32:06 deploying to production…
14:32:09 ✓ deploy success
仪表盘视角切换
访问量
12,480
↑ 18%
新用户
326
↑ 6%
转化率
4.2%
↓ 0.8%