展示
FigureBand
一排被数出来的事实,只用细线分隔,此外什么都没有。
示例
default
- Releases
- 12
- Median build
- 2m 14s
- down from 3m 40s
- Rollbacks
- 0
- Uptime
- 99.98%
- measured at the edge
说明
一排被数出来的事实,除了细线之外没有别的分隔。
用 <dl>,因为它本来就是:每个格子是一个词条和它的值,而一堆 <div> 组成的网格,没法告诉读屏软件哪个数字配哪个标签。
每条分隔线的宽度是去点名那些不开启新行的格子,而不是先加一条线再撤销——同等优先级下的 undo 要靠 Tailwind 自己的排序来裁决,而布局不该依赖那个。这样画出来,最后一列外侧永远不会多出一条边。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| figures必填 | Figure[] | — | |
| label | string | 当这条带子自己没有可见标题时,给辅助技术用的名字。 | |
| scale | 'lead' | 'sub' | 'lead' | 数值排多大。 `lead` 给那种“本身就是这一页的重点”的带子——数据本身**就是**内容的那种标题式统计。`sub` 给辅助页面的带子,也让字号阶梯保持诚实:一个辅助性的数字,不能和这一页自己的主体排成一样大。 |
同时接受 Omit<HTMLAttributes<HTMLDListElement>, 'children'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
无障碍
- 用 <dl>:每个格子是一个词条和它的值,这是一堆 div 表达不了的。