展示
Kbd - 按键
键盘上的一个键，就按键来排版。
用法
import { Kbd } from '@misoto22/folio'说明
键盘上的一个键，就按键来排版。
渲染成 <kbd>，这就是表示“这是个按键”的那个元素——一个被打扮成按键模样的 <span> 对读屏软件什么都没说。尺寸用 em，所以它跟着旁边的文字走，而不是把自己钉死在某个 px 值上——同一个快捷键在一页里出现三种大小，就是那么来的。
这里每一个尺寸都跟着上下文走，只有行高不跟——它曾经是一个写死的 1.6，那是正文的阅读行高，安在一个永远不是段落的小块上。于是它放进一个控件里就比旁边的文字高出一截，把整个盒子顶过了控件自己的高度 token：顶栏那个搜索框量出来是 39px，而它的 sm 是 36px，干这件事的就是这个键帽。--control-lh 是一个单行盒子该有的行高，而它就是一个单行盒子。
结构
| 部件 | 说明 |
|---|---|
| 键帽必填 | 那个 <kbd>：--radius-sm 圆角上一条 --rule-2 细线，min-w-[1.6em] 让单个字符成为一个键帽而不是一根细条，0.8em 的字号让整个键帽跟着周围的文案一起缩放。 |
| 键面字符必填 | children，原样打印。一个元素一个键——两个键之间那个空格是标记里真实存在的空格，不是组件画出来的分隔符。 |
实践建议
推荐
- 一个键写一个 Kbd。把整组和弦塞进一个盒子——⌘K——得到的是一个装着两个字形的键帽，而那个让单字符成为方块的 min-w-[1.6em]，只会被撑开去装下两个。
- 让它从周围取尺寸：它是按 em 排的，所以同一个快捷键印在标题里和印在正文里都对。把它钉死成 px，正是同一个快捷键在同一页上长出三种大小的原因。
- 只有字形的键要给 aria-label——⌘、⌥ 和 ⇧ 要么被念成它们的 Unicode 名称，要么干脆被跳过，所以纯用符号写出来的 Mac 快捷键，是一条没有声音的指令。
避免
- outline 的 Badge 和 Kbd 在屏幕上几乎一模一样，所以在这两者之间做选择完全是在选含义：<kbd> 说的是读者要按下它，而一个长得像键的 badge，招来的是一次没有任何东西回应的按压。
- 这里没有任何东西会绑定任何东西。这个元素就是排版，所以为一个没有任何处理器在听的快捷键印出来的键，是在为一个页面并不具备的功能写文档。
示例
default
一个快捷键，就在解释它的那句话里面。两个键帽之间的空格是标记里真实的空格，不是组件画出来的东西，而每个键帽都是自己的 kbd 元素——正是这一点告诉读屏软件，这一串是按键而不是一个词。这里没有任何东西绑定了什么，所以只在真的有处理器在监听时，才把一个键印出来。
Press ⌘ K to open the palette, or Esc to close it.
one cap per key
一组三键组合，画成三个键帽。一个装着 ⌘⇧P 的盒子是一个并不存在的按键，而那个让单个字符成方形的 min-w-[1.6em]，只会被撑开去装下这三个。那些符号键带着 aria-label，因为 ⌘ 和 ⇧ 会被念成它们的 Unicode 名字，或者干脆被跳过——一条只用符号写出来的 Mac 快捷键，是一条无声的指令。
Reformat the file with ⌘ ⇧ P.
On Windows and Linux the same chord is Ctrl Shift P.
sized by its copy
同一个键，印在三档字号里。键帽是 0.8em，它的内边距也用 em，所以它的尺寸取自它旁边的一切——一个组件，在标题里、在正文里、在图注里都是对的。钉死成一个像素值，它就只在其中一处正确，而这正是同一个快捷键在同一页上长出三种尺寸的经过。
Press / to search
The same / works from anywhere on the page.
Shortcut: /
无障碍
- 渲染 <kbd>，它带有语义，而加了样式的 <span> 没有。