梧桐设计语言v0.4.1

标签页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
import { Tabs, Segmented } from "@wutong/ui";

下划线 Tab 与 Segmented

Tab 下划线是 foreground 不是主色;Segmented 选中项白块浮起

API

属性类型默认说明
items{ key, label, count? }[]不超过 6 个;超过用 Select
value / onChangeK / (k) => void受控
Segmented.blockboolean通宽等分(移动端)
Segmented.size"sm" | "md" | "lg""sm"32(工具行)/ 36 / 40(移动端)