Hotkey 快捷键Hotkey · Kbd
Hotkey 让用户录制一个组合键,用在“自定义快捷键”这类设置里。Kbd 是单个键帽,用来在文档、菜单和提示里展示按键。
录制
点击或按 Enter / 空格开始录制,然后直接按下组合键。修饰键按下即显示,按下一个非修饰键后完成。Esc、Tab 或失焦取消,原来的值不变。
⌘K当前:Command + K
点击录制未设置
尺寸、文案与禁用
⌃B当前:Control + B
⌥⇧F当前:Option + Shift + F
⌘↩当前:Command + 回车
尚未绑定未设置
⌘S当前:Command + S
受控用法
value 是用 + 连接的按键名(KeyboardEvent.key 的写法),空字符串表示未设置。onChange 的第二个参数是拆开的数组。组件只负责录制,不负责监听和触发快捷键。
⌘⇧K当前:Command + Shift + K
value:Meta+Shift+KKbd 键帽
用 k 传按键名会自动换成符号(⌘ ⇧ ⌥ ⌃ ↩ …),并带上读屏能读出的名称;也可以直接写 children。
⌘⇧⌥⌃↩⌫⇥EscSpace↑↓←→
AAA
按 ⌘ K 打开命令面板,按 Esc 关闭。规格
- 录制中
- 强调色描边 + 光环呼吸 1.6s · 不再叠加焦点环
- 键帽
- 逐个弹入 · 错峰 45ms · bouncy
API
Hotkey
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | — | 组合键(受控),用 + 连接,如 "Meta+Shift+K";空字符串表示未设置。 |
defaultValue | string | '' | 初始组合键(非受控)。 |
onChange | (value: string, keys: string[]) => void | — | 录到新的组合键时触发。 |
placeholder | string | '点击录制' | 未设置时的提示。 |
recordingText | string | '按下组合键…' | 录制中的提示。 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸。 |
disabled | boolean | — | 禁用。 |
Kbd
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
k | string | — | 按键名(Meta、Shift、Enter、ArrowUp、K…):自动换成符号并带可读名称。 |
size | 'sm' | 'md' | 'lg' | 'md' | 高度 20 / 默认 / 28。 |
children | ReactNode | — | 不传 k 时直接显示的内容。 |
无障碍
- Hotkey 是
role="button",用aria-pressed表示是否在录制;当前绑定(或“正在录制”)写在一个 aria-live 区域里并通过aria-describedby关联,读屏读的是“Command + K”而不是符号。 - Enter / Space 开始录制;录制中 Esc 取消、Tab 取消并照常移走焦点,其它按键都会被录下。
- 录制期间按键被拦下,不会冒泡到外层——在对话框里录制时按 Esc 只取消录制,不会关掉对话框。
- 必须有可读名称:放进带 label 的 Field,或给
aria-label。 - Kbd 渲染成
<kbd>;符号外面包了带 title 的<abbr>,悬停和部分读屏能得到按键的名字。