组件 / 内容
表格
定义表格的结构、状态、Token 和使用边界。
结构
组成部分
- 01容器
- 02主要内容
- 03辅助内容
- 04可选操作
预览
交互调整
使用中性色表示选中
| 尺寸 | 高度 | 用途 |
|---|---|---|
| sm | 36px | 紧凑区域 |
| md | 44px | 默认 |
| lg | 52px | 重要流程 |
<Table />外观
视觉样式
- 默认
- 轻量
- 强调
尺寸
规格
- 小
- 中
- 大
状态
交互状态
内容
使用规则
建议
- 使用直接、稳定的标签。
- 只显示完成当前任务需要的信息。
避免
- 不要依赖颜色单独表达状态。
- 不要为装饰增加额外强调色。
Token
组件映射
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
component.table.background.rest表格默认背景 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
component.table.background.hover表格悬停背景 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
component.table.background.selected表格选中背景 | color | oklch(0.9 0.002 255) | oklch(0.47 0.01 255) | |
component.table.text.default表格文字 | color | oklch(0.2 0.001 255) | oklch(0.98 0 255) | |
component.table.border.default表格边框 | color | oklch(0.82 0.004 255) | oklch(0.47 0.01 255) | |
component.table.radius表格圆角 | dimension | 0.625rem | 0.625rem | Aa |
component.table.motion.duration表格交互动效 | duration | 120ms | 120ms | Aa |
无障碍
语义与键盘
无障碍
- 使用原生语义或完整实现对应 ARIA 模式。
- 提供可见焦点和不依赖颜色的状态提示。
键盘
- Tab 进入或离开组件。
- Enter 或 Space 执行当前操作。
属性与接口
公开接口
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
disabled | boolean | false | 禁用交互。 |
className | string | — | 附加样式类。 |
aria-label | string | — | 无可见标签时提供名称。 |
<Table />