展示
LinkArrow - 链接箭头
标记“这条链接会离开本页”的记号。
用法
import { LinkArrow } from '@misoto22/folio'说明
标在“会离开本页”的链接上的记号——去站外，或者进入完整索引。
以前调用处是直接在链接文字里写一个光秃秃的 ↗，它会继承链接自己的字号（17px 的箭头挨着 17px 的词，跟它抢注意力），而且因为没人把它藏起来，会被念成“东北方向箭头”。
inline-block 在这里承担了两件事：它挡住带下划线的父元素把线穿过这个字形，同时它也是 align 的度量基准。尺寸用 em，所以跟着旁边的文字走；颜色是按纸面定的，所以放在反转底板上的调用处要自己传颜色。
结构
| 部件 | 说明 |
|---|---|
| 记号盒必填 | 一个 aria-hidden 的 inline-block <span>，带着 0.22em 的前导间距、0.28em 的基线抬升和 --ink-3-aa。inline-block 在这里两次承重：它拦住带下划线的父元素把那条线画穿字形，同时它也是对齐所依据的那个盒子。 |
| 字形必填 | ↗ 本身，0.68em，所以它跟着旁边的字走，而不是跟它抢。以 EXTERNAL_LINK_ARROW 导出，好让不是 React 的界面用上同一个字符。 |
实践建议
推荐
- 把它放进 <a> 里面，作为最后一个子节点。放在外面，它就是一个指着某条链接的箭头，而指针差 0.22em 点不到那条链接。
- 界面不是 React 时用 EXTERNAL_LINK_ARROW——一条 Markdown 管线、一张 OG 图、一封邮件——好让这个记号始终是同一个字符，而不是整个站点上三个几乎一样的箭头。
- 落在反白底板上时，用 className 传一个颜色进去：它用的是 --ink-3-aa，那是对着纸色的 AA 下限，压在墨色上几乎看不见。
避免
- 这个箭头不是那句提示。它是 aria-hidden 的，target="_blank" 也不会被播报，所以一条会开新标签页的链接，得在自己的可访问名称里把这件事说出来——否则这个字形就是所有人拿到的唯一警告，而且前提是看得见。
- 别把它钉死成 px。是 0.68em 让同一个组件在正文里和在标题里都对；固定成 11px，它在其中一处是对的，在另一处只是一个小点。
- 别把它挂在索引的每一行上。它标的是“目的地变了”，所以一份每条链接都离开本站的列表，什么都没标出来，还为此每行付掉 0.22em。
示例
default
这个记号，在锚点里面，并且是它的最后一个子节点。放到外面，它就是一个指向一条链接、而指针会差 0.22em 按不中的箭头。这个图形用 em 定尺寸，于是它跟着旁边的字走，而不是跟旁边的字较劲，而且它是 aria-hidden 的——把它放在这儿不会播报出任何东西，所以链接自己的那些词仍然必须说清楚它通向哪里。
only where it leaves
三条链接，一个箭头。它标记的是目的地的改变，所以一份每行都带着它的索引，等于什么都没标，还为此每行付出 0.22em。那条外链在自己的文字里就写着「在新标签页打开」，因为箭头和 target="_blank" 都不会被播报——没有那几个字，这个图形就是任何人能拿到的唯一警告，而且还得看得见才行。
on a reversed plate
这个组件上唯一一处本来就打算被覆写的东西。它用的是 --ink-3-aa，那是对着纸色的 AA 下限，压在墨色上则几乎看不见，所以一个位于反色板上的调用处，会通过 className 把自己的颜色传进来。其余一切照旧：仍然是锚点的最后一个子节点，仍然是 0.68em，仍然 aria-hidden。
再导出
EXTERNAL_LINK_ARROW = '↗'字形本身，导出出来，让非 React 的界面也能用同一个标记。
无障碍
- aria-hidden，所以它不会在句子中间被念成“东北方向箭头”。
- 以 em 为单位，跟随它旁边的字号，而不是跟它抢。