Kbd 键盘按键
键盘快捷键展示组件,keys 按空格拆分自动渲染多块并用 + 连接;非交互组件。
基本用法
组合快捷键
语义键名
keys 支持语义键名自动映射为符号(如 command → ⌘、shift → ⇧),键帽内嵌 <abbr title="全称"> 提供读屏全称与悬停提示;未命中映射的键名按字面值渲染(如 k、f1):
语义键名映射
单键与空态
单键与空态
自定义内容
slot 自定义内容优先
形态(variant)
raised(默认立体)/ outline(描边)/ subtle(浅底)/ plain(纯文字):
四种形态
尺寸(size)
三档尺寸
颜色(color)
支持 11 个预设色名(明暗主题自动适配)或任意 CSS 色值(直接生效,优先于预设与默认)。键帽底色染色:
预设色板
自定义色值
组合使用
多个 kbd 组合成组用 oas-space(间距控制):
分组
嵌进其他组件用 slot 投影:
嵌套进按钮
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 自定义颜色:支持 11 个预设名(映射 --oas-preset-*-text 达标 token)或任意 CSS 色值,键帽底色染浅 + 描边跟随 | string | — |
keys | 空格分隔的按键序列,如 "ctrl shift k" | string | — |
size | 尺寸档位:small / medium(默认)/ large;非法值回落 medium 并告警 | string | — |
variant | 形态:raised(默认,立体键帽)/ outline(描边)/ subtle(浅底)/ plain(纯文字);非法值回落 raised 并告警 | string | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
说明:空
keys渲染单个空块;提供 slot 内容时优先展示 slot。组件为纯展示,role="text",不派发任何事件。