Kbd
用于命令提示与菜单快捷键的键盘 token。
Kbd
基础用法
Kbd
示例加载中...
交互契约
- 根节点是
<kbd>，保留原生键盘提示语义。 size="sm"是默认紧凑尺寸，适合行内帮助和菜单快捷键。tone="primary"用于突出产品主快捷键，不改变插槽文本。- 组件没有事件，也没有内部状态。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'sm' | 'md' | 'sm' | Token 尺寸：sm（默认）用于行内帮助与菜单快捷键；md 字号更大，用于独立展示的快捷键。 |
tone | 'default' | 'primary' | 'default' | 视觉色调：primary 仅用于页面或命令的主快捷键，同屏不宜超过一组。 |
Events
TxKbd 不派发组件事件。
Slots
| 插槽名 | Props | 说明 |
|---|---|---|
default | - | 键位文本，例如 ⌘、Ctrl 或 K。 |
最佳实践
- 组合键建议拆成多个
TxKbd，不要用一个长字符串承载全部内容。 - 宿主文案应感知平台：macOS 使用
⌘，Windows/Linux 使用Ctrl。 tone="primary"只用于页面或命令里的主快捷键。- 快捷键应配合可见操作文案，单独出现不够可发现。
审阅说明
- 组件源码:
packages/tuffex/packages/components/src/kbd/src/TxKbd.vue确认语义化<kbd>根节点、size/toneclass 和仅默认插槽内容。 - 实测覆盖: Coverage:
packages/tuffex/packages/components/src/kbd/__tests__/kbd.test.ts覆盖快捷键内容、根标签和变体 class。 - 导出入口:
packages/tuffex/packages/components/src/kbd/index.ts使用withInstall包装组件并导出TxKbdInstance。
Source
查看源码
packages/tuffex/packages/components/src/kbd/index.ts