数值 Token 表
共用的数值 token 表与实用示例。
含间距示例的呈现
| 令牌 | 值 | px | 表示方式 |
|---|---|---|---|
--spacing-4xs | .125rem | 2px | |
--spacing-3xs | .25rem | 4px | |
--spacing-2xs | .375rem | 6px | |
--spacing-xs | .5rem | 8px | |
--spacing-sm | .75rem | 12px | |
--spacing-md | 1rem | 16px | |
--spacing-lg | 1.5rem | 24px | |
--spacing-xl | 2rem | 32px | |
--spacing-2xl | 3rem | 48px | |
--spacing-3xl | 4rem | 64px | |
--spacing-4xl | 6rem | 96px | |
--spacing-5xl | 8rem | 128px |
使用于 布局系统指南.
用法与接口
ThemeNumberVariableTable 从 preset 读取数值 tokens 和单位。spacing 呈现方式通过斜线背景与浮起对象显示每个实际间距。表格具有稳定的 token 与数值列、细致的行分隔线,以及窄屏幕下可通过键盘聚焦的滚动区域。
<ThemeNumberVariableTable namespace="spacing" representation="spacing" />representation prop 可以省略。断点和容器使用同一份数据驱动表格,附上说明但不显示间距示例。请以文字保留原生 token 值与参考单位,并将这份列表放在测量用布局示例之外。数值表查看页呈现当前的共用表格。