标签页Tabs
你可能会说
内容太多了，帮我分几个页签，点一下就换一屏。
标签页是在同一页面内切换平级内容面板的导航组件项目详情可在“概览、配置、日志”之间切换。要清楚显示当前标签和是否保留输入状态；本质为不同页面的内容应使用导航菜单。
组成结构 · 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%
延伸阅读 · 权威出处