展示
FigureBand - 数字带
一排被数出来的事实，只用细线分隔，此外什么都没有。
用法
import { FigureBand } from '@misoto22/folio'说明
带完整边框的响应式指标组，每项数据保留词条与数值的语义关系。
结构
| 部件 | 说明 |
|---|---|
| 容器查询外层必填 | 包在列表外面的一个普通 <div>，而且必须有：容器查询解析的是某个祖先容器，绝不会是声明容器的那个元素自己。它的 w-full 同样承重——contain: inline-size 计算宽度时不看内容，所以作为一个按内容收缩的 flex 项，它解析成了零，整条带子渲染出来是两列 0px。 |
| 带必填 | 那个 <dl>：上下各一条 --rule 细线，外层到 @3xl 之前是两列、之后是四列——这是关于这条带子有多宽的判断，不是关于窗口有多宽的判断。 |
| 格子必填 | 一个数字一个 <div>。每一档分栏宽度点名的是那些不开新行的格子，而不是先加一条线再收回去，所以永远不会有一条边被画到最后一列之外。 |
| 词条必填 | 那个 <dt>：数值上方的大写等宽眉标。 |
| 数值必填 | 那个 <dd>，用标题字脸排，字号随 scale 取 --fs-lead 或 --fs-sub。 |
| 注解 | 同一个词条下的第二个 <dd>——一段趋势、一个限定，或者第二个事实。 |
实践建议
推荐
- 给它两个或者四个数字。这个网格在 @3xl 之前是两列、之后是四列，所以三个在两种排法里都留一个洞，五个在带子铺成四列之后留三个洞。
- 一条给页面做支撑、而不是页面本身的带子，用 scale="sub"：--fs-lead 是横幅标题那一档，所以一个用 lead 排出来的辅助数字，是在和页面自己的主题抢。
- 每个数字按它数的那件事来做 key——id 是必填而不是可选，因为它就是 React 的 key，而用下标做 key 的话，列表一重排，下一次渲染的数字就落到了上一个词条底下。
避免
- 别往 note 里放一个句子。数值和注解是同一个 <dt> 下的两个 <dd>，所以读屏软件会把它们当作同一个词条的两个值来念：「文章：48，今年 +6」讲得通，一个从句讲不通。
- 别用 className 里的视口断点去设列数。这条带子读的是容器查询，所以写在它上面的 sm:grid-cols-4，在 1440px 窗口里那条 390px 的侧栏中就是错的——而那正是它取代掉的做法。
- figures={[]} 渲染出来是 null，所以一条被喂了空数组的带子既不留下线，也不留下空状态——如果“什么都没有”本身就是新闻，那得由调用处说出来。
示例
default
四个数字，它和二一样，是仅有的几个排得下的个数之一：容器到 @3xl 之前是两列、之后是四列，所以三个在两种排布下都留个洞，五个则留三个。id 是必填而不是可选，因为它就是 React 的 key——一旦列表重排，用下标当 key 会把下一次渲染的数字塞到上一个标签底下。
- Releases
- 12
- Median build
- 2m 14s
- down from 3m 40s
- Rollbacks
- 0
- Uptime
- 99.98%
- measured at the edge
a supporting band
同一条数字带，降一档。scale="sub" 是给那些为页面作支撑、而不是页面本身的数字用的——lead 是这条带做标题的那一档，所以一条支撑性的带设在那儿，是在跟它上面的标题抢同一级台阶。两个数字在任何宽度下都填满一行，这也是为什么值得去拿的个数是二和四。
Retrieval rewrite
Chunking moved from a fixed window to headings, and the citation panel started reading the same rows the answer did.
- Median latency
- 240ms
- from 610ms
- Answers with a citation
- 96%
- from 71%
a note is a second value
什么该放进 note，什么不该。数值和注记是同一个 dt 底下的两个 dd，所以读屏软件会把它们当作同一个术语的两个值来读：「文章：48，另外今年 6 篇」成立，而一个解释原因的从句不成立。把它压在一个趋势、一个限定条件，或者第二个事实上——那种句子属于这条带周围的正文。
- Posts
- 48
- +6 this year
- Frames
- 1,204
- 38 rolls
- Projects
- 11
- 3 shipped
- Words
- 86k
- English and Chinese
in a narrow column
同样这四个数字，放在一个 24rem 的列里，仍然是两个一排。这条带读的是容器查询，不是视口，所以它在判断的是这条带自己有多宽，而不是窗口有多宽——这也是为什么通过 className 往上写一个 sm:grid-cols-4，在一个 1440px 页面的侧栏里会是错的。把列拉宽，同样的标记自己就变成四个一排。
- Components
- 61
- Tokens
- 145
- Examples
- 147
- Peer deps
- 2
无障碍
- 用 <dl>：每个格子是一个词条和它的值，这是一堆 div 表达不了的。