Skip to content

Kbd 键盘按键

键盘快捷键展示组件,keys 按空格拆分自动渲染多块并用 + 连接;非交互组件。

基本用法

组合快捷键

语义键名

keys 支持语义键名自动映射为符号(如 command → ⌘、shift → ⇧),键帽内嵌 <abbr title="全称"> 提供读屏全称与悬停提示;未命中映射的键名按字面值渲染(如 kf1):

语义键名映射

单键与空态

单键与空态

自定义内容

slot 自定义内容优先

⌘CSpace

形态(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",不派发任何事件。

基于 MIT OR Apache-2.0 双许可发布