示例
直接操作示例，查看组件在具体任务中的状态与反馈。
同时按键
打开搜索：Ctrl + K
保存草稿：Ctrl + S
连续按键
前往组件目录：依次按 G，再按 C。
键盘说明
同时按下：Ctrl + Shift + P
依次按下：G → D
使用建议
只标记真实键盘输入
Kbd 用于说明用户需要按下的键，不用于装饰普通标签、筛选项或按钮文案。
区分组合与连续操作
同时按键使用加号连接，连续按键使用“再按”或逗号说明，避免只靠视觉间距猜测。
跟随平台显示名称
如果产品跨平台，宿主应根据当前平台显示 Ctrl、Command、Alt 或 Option 等用户熟悉的名称。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseKbd } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Kbd 只呈现键帽语义，不注册快捷键、处理冲突或自动切换平台符号；实际键盘行为必须由宿主实现并测试。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseKbdProps
extends Omit<
HTMLAttributes<HTMLElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseKbdClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseKbd 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseKbdClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |