标签页Tabs
页内切换视图。两种:
- 下划线 Tab(页级):文字
label 13、高 40,选中项 foreground + 2px 下划线(foreground,不是主色),未选中 muted-foreground。可带计数。底部一条 border 通栏线。
- Segmented(工具行级,如「全部 / 只看超期」):
secondary 底、radius-md、高 32,选中项 card 底 + shadow-raised 浮起——与侧栏选中态同一逻辑。
Tab 不超过 6 个;超过用 Select。移动端 Tab 可横向滚动,Segmented 通宽等分。
消费者提供:项、当前项、计数。
示例
import { Tabs, Segmented } from "@wutong/ui";
下划线 Tab 与 Segmented
Tab 下划线是 foreground 不是主色;Segmented 选中项白块浮起
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| items | { key, label, count? }[] | — | 不超过 6 个;超过用 Select |
| value / onChange | K / (k) => void | — | 受控 |
| Segmented.block | boolean | — | 通宽等分(移动端) |
| Segmented.size | "sm" | "md" | "lg" | "sm" | 32(工具行)/ 36 / 40(移动端) |