跳到正文
GitHub

展示

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 自己的排序来裁决,而布局不该依赖那个。这样画出来,最后一列外侧永远不会多出一条边。

属性

FigureBand props
属性类型默认值说明
figures必填Figure[]
labelstring当这条带子自己没有可见标题时,给辅助技术用的名字。
scale'lead' | 'sub''lead'数值排多大。 `lead` 给那种“本身就是这一页的重点”的带子——数据本身**就是**内容的那种标题式统计。`sub` 给辅助页面的带子,也让字号阶梯保持诚实:一个辅助性的数字,不能和这一页自己的主体排成一样大。

同时接受 Omit<HTMLAttributes<HTMLDListElement>, 'children'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 用 <dl>:每个格子是一个词条和它的值,这是一堆 div 表达不了的。