图示
DiagramLegend - 图例
钥匙：哪一种画法代表哪一类东西。
用法
什么时候用它
来自@misoto22/folio/diagrams
import { DiagramLegend } from '@misoto22/folio/diagrams'说明
钥匙：哪一种画法代表哪一类东西。
在一套单色系统里它不是可有可无的装饰，而这里是必须把这句话说白的地方。当队列和缓存的区别是一个符号而不是一种颜色时，图例就是读者唯一被告知那个符号是什么意思的地方——一张画法没有说明的图，那些画法等于没画。
用 <ul> 而不是一排 <span>：它是一份成对的列表，而「有几项」也是读屏软件应该说出来的一部分。
结构
| 部件 | 说明 |
|---|---|
| 行必填 | 一行会换行、按基线对齐的内容，上方压着一条顶线。放在图里时，它落在画面和结论卡片之间——读者认不出某个记号时，正是往那里看。 |
| 引导词 | 这一行前面的 Key 这个词。title={null} 会去掉它，只留下光秃秃一行；而无论去不去，那个词都留在列表上当它自己的无障碍名称。 |
| 列表必填 | 一个成对内容的 <ul>，而不是一排 span，所以「有几项」也是读屏软件会说出来的一部分——「列表，六项」是关于一份图例的第一个有用事实。 |
| 样本必填 | 一个 14 × 14 的 svg，装着条目自己的标记，对辅助技术隐藏。是标记而不是从一份固定清单里取的名字，因为图例必须展示图画出来的那同一个记号。 |
| 标签必填 | 记号旁边的那个词，用的是 meta 那一档字。标准构造器是从板块眉标所印的同一张表里取的，所以一块写着 SERVICE 的板块，永远不会被一条写着 Datastore 的图例来解释。 |
实践建议
推荐
- 条目要用 kindLegend、variantLegend 或 stateLegend 来造。它们是用渲染器自己的绘制代码做出来的，所以图例不可能变成展示一个图没画的记号，或者一个板块没印的词。
- 图的 legend 就留在 "auto"。它只列真正画出来的那些种类；"all" 会在一张只用了三种的图旁边印出七种，那就是四条画面撑不住的主张。
- 图例正好在一句已经说明了它是什么的说明文字下面时，就传 title={null}。列表把 Key 留作自己的无障碍名称，所以引导词可以拿掉，而这一行不会丢掉名字。
避免
- 图例不是做出区分的地方。那两个状态 token 是这些图花掉的全部色相，而每一种终态同时也有自己的板块形状——只靠颜色承载的区别，读者只能在先注意到有图例这回事之后，一条一条地去查。
- 在一张全是带 tag 板块的图上，legend="hidden" 不是免费的。板块在同一个眉标位上印的是它的 tag 或者种类词，二者取一，而 tag 胜出，所以在带 tag 的板块上种类只由符号承载——藏起图例，等于把页面上唯一能教会读者这个符号的东西拿走。
示例
default
渲染器为自己构建的那几套里的两套。kindLegend 用板子画符号时所用的同一个组件来画每一个符号，并且用板子引题所印的同一个词来给它打标签，于是图例和它上面那张图不可能各走各的；stateLegend 则把每个状态画成板子本身，连颜色和虚线一起。title 默认是「Key」，这也是为什么第二个被改了名——两个图例摞成一列、都顶着「Key」，等于对「哪个是哪个」只字未提。
lines rather than plates
variantLegend 给关系、而不是给盒子编制图例，把每一条目画成那道笔画本身——一条主路径更重的分量、一条跨越信任边界的线那种长虚线、一条不阻断的线那种短虚线。像这样的图例里，把 return 那个变体留在外面：它画出来和 dashed 一模一样，在图中是靠一个空心箭头分辨的，而一个 14 × 14 的样本没有地方展示那个，所以把两个都列上，等于给读者两个名字不同、样子完全相同的记号。第二行覆盖了一个标签，并把 title 传成 null 以得到一行光秃秃的图例，因为它上面那个图例已经说过「Key」了。
a key you draw yourself
sample 收的是画在 14 × 14 栅格上的标记，而不是一个拿去和固定清单比对的名字，正是这一点让一张自己画了某种记号的图，能够为它写说明——这里是三种没有任何渲染器知道的归属状态。放进去的东西必须就是画作画出来的那个记号：一个自创形状的图例，会让读者在画里到处去找一个从来不存在的东西。用图相关的 token 去画这些样本、别用固定颜色，好让图例跟着图形一起进暗色模式、一起上纸。
无障碍
- 是一份成对的列表而不是一排 span，所以“有几项”也是读屏软件会说出来的一部分。
- kindLegend、variantLegend 和 stateLegend 都用渲染器自己的绘制代码来造标准集合，所以图例永远不会和图漂移开。