标签页Tabs
你可能会说
内容太多了，帮我分几个页签，点一下就换一屏。
标签页是在同一页面内切换平级内容面板的导航组件项目详情可在“概览、配置、日志”之间切换。要清楚显示当前标签和是否保留输入状态；本质为不同页面的内容应使用导航菜单。
什么时候用
- 同一页面切换几组平级内容：全部 / 进行中 / 已完成全部待付款已完成
- 详情页内容分块：概览、配置、日志，不用来回跳页概览配置日志
- 平级内容较少，且用户会频繁来回查看评论历史收藏不用跳转，点一下就换内容
- 标签文案简短直接，便于快速扫读全部进行完成
什么时候不用
- 内容有明确先后顺序时，使用 步骤条 Steps 更合适1填写信息2确认订单3完成支付
- 标签过多且无法在可用宽度内清楚显示时，应改用 导航菜单 Menu 或 选择器 Select放不下的标签会被挤没
- 两组内容需要左右对照 → 并排展示，别藏进标签左右分栏，两边同时对照
- 标签里放着未保存的表单，一切换内容就丢基本信息高级设置还没保存的内容…切走标签，填的内容没了
组成结构 · Anatomy
进行中的 6 个项目…
整组标签 + 面板的容器
可点击切换，文案要短
高亮 + 下划线，告诉用户现在在哪
当前标签对应的内容区
常见变体 · 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%
延伸阅读 · 权威出处