数据
Metric - 读数板
一条读数，摆在一块小板上：一个标签、一个数字，以及限定它的那句话。
用法
什么时候用它
import { Metric } from '@misoto22/folio'说明
一条读数，摆在一块小板上：一个标签、一个数字，以及限定它的那句话。
它和 BigNumber 不是一回事：那个是同一个想法放大到标题尺寸，给的是「整个视图就讲这一个数字」的场合，而且要用 charts 入口。这个是控制台上一排四个的那种小块：更小、用等宽而不是编辑体，并且带着两样 BigNumber 没地方放的东西——一个状态色调，以及数字下面一个不是 delta 的自由槽位。这两样就是它存在的全部理由；一个因为 delta 用不上、只好把某些小块写成 <div> 的仪表盘，是一个装着两种小块设计的仪表盘。
数字按构造就是等宽加表格数字，因为一排四个既是横着读的，也是顺着这一列往下读的，而比例数字会把同一个量级排成两个宽度。
结构
| 部件 | 说明 |
|---|---|
| 板必填 | 一个 <article>，圆角取 --radius，四周一条细线，内边距 12px；用了 asChild 就是传进来的那个元素。它没有标题也没有地标：一排四个是一排读数，不是四个区块。 |
| 标签必填 | label，等宽小字，--ink-3-aa。没有任何东西在程序上把它和那个数字绑起来，所以文档顺序就是它们之间的全部关联。 |
| 状态点 | 设了 tone 时，标签旁边的一个 StatusDot，不闪，且 aria-hidden。它按构造就是装饰，这也正是它想说的意思必须同时写进 detail 的原因。 |
| 数字必填 | value，等宽字体，字号 --fs-item，表格数字，原样打印——单位、货币和地区一概不猜。用表格数字，是因为一排四个既是横着读的，也是顺着这一列往下读的。 |
| 说明 | detail，在数字下面，--ink-2，小一号。一行：让这个数成为一条读数而不只是一个计数的那句话。 |
| 附加位 | aside，放在最后，不包一层也不加样式：一条走势线、一个分母、一句提醒。和 BigNumber 的注释槽位不同，它自己不带外边距，所以一块紧凑的小板仍然紧凑。 |
实践建议
推荐
- 状态色调想说的意思，也要写进 detail。这个点按构造就是 aria-hidden 的，所以一个对故障的全部交代只是「它是红的」的小块，对读屏软件什么都没说，在灰度下也一样。
- value 在调用处格式化好。它是被原样打印的，正是这一点让地区、货币和单位由应用决定一次，而不是被四块小板各猜一遍。
- 用 asChild 时，塞进来的子元素自己不要带子节点。标签和数字是注入进它里面的，所以 `<Link href="/jobs" />` 就是全部的写法——一个自带内容的子元素，会同时拿到它自己的内容和这块板。
避免
- 有一个数字、又有一个变化要报告时，不要用这个。BigNumber 有 delta、有由调用处说明的方向，还有一句会播报出来的判断；一个状态点这三样都不是，而在 aside 里把它们重新实现一遍，播报出来的东西是错的。
- asChild 下不要往 detail 里写一整句话。整块板都在一个链接里面，所以这个链接的可访问名称是里面每一个词按顺序读一遍，多加的一个从句，就是每次走到这个链接都要多听一遍的从句。
- 不要在里面放标题。这块板是一个没有名字的 <article>，所以放进去的标题会开出一个读屏软件会列出来的区块——四块小板于是读起来是页面的四个区块，而不是一排数字。
示例
一排四个
一排四个，也正是它存在的那个排法。数字按构造就是等宽加表格数字，所以同一个量级在每一块里都是同样的宽度，这一列读起来才是一列，而不是四个互不相干的数。每一个状态点都是 aria-hidden 的，所以它想说的意思也写在数字下面那行里——一个对故障的全部交代只是「它是红的」的小块，对读屏软件什么都没说，在灰度下也一样。每一个 value 进来时都已经格式化好了：地区、单位和货币是应用自己的决定，做一次，而不是被四块小板各猜一遍。
63,851
newest yesterday
0
failing since Tuesday
12
3 waiting on approval
7
all reconciled
一块能点的板
asChild 把整块板交给调用处自己的元素，一个小块就是这样变成链接的，而这个包不需要引入任何路由。被塞进来的子元素自己不带子节点——标签、数字和它们下面那一行都是注入进去的，所以一个自闭合的 a 标签就是全部的写法。因为这块板本身「就是」那个链接，它的可访问名称是里面每一个词按顺序读一遍，这也是这里那行说明要写短的原因，哪怕同样一句话放在普通小块上读起来完全没问题。
无障碍
- 状态点无一例外都是 aria-hidden 的，所以颜色永远不是唯一的载体——detail 里的那些字才是。
- value 进来时就已经格式化好了。这个组件不会去猜单位、货币或地区。
- 在 asChild 下，整块板会变成调用处给的那个元素，所以那个链接或按钮就是整块板，而不是板里面的一个点击目标。