KeyboardShortcut 键盘快捷键

键盘快捷键展示

键盘快捷键展示组件，渲染格式化的快捷键提示，可附带描述文本。

何时使用

在界面中展示快捷键提示时使用，如设置页面、帮助文档、命令面板。

代码示例

基础用法

tsx

import { KeyboardShortcut } from "@chaos_team/chaos-ui/ui"

export function Basic() {
return <KeyboardShortcut keys={["Ctrl", "K"]} description="Open command palette" />
}

多个快捷键

tsx

import { KeyboardShortcut } from "@chaos_team/chaos-ui/ui"

export function Multiple() {
return (
  <div className="flex flex-col gap-2">
    <KeyboardShortcut keys={["Ctrl", "N"]} description="New file" />
    <KeyboardShortcut keys={["Ctrl", "S"]} description="Save" />
    <KeyboardShortcut keys={["Ctrl", "Shift", "Z"]} description="Redo" />
  </div>
)
}

API / Props

KeyboardShortcut

Prop	Type	Default	说明
`keys`	`string[]`	—	Key combination / 按键组合 (required)
`description`	`string`	—	Description text / 描述文本
`layout`	`"horizontal" \| "vertical"`	`horizontal`	Layout / 布局
`className`	`string`	—	自定义样式类名
...rest	`React.ComponentProps<"div">`	—	透传 `<div>` 原生属性

注意事项

Client Component: 使用 "use client",依赖 React hooks/状态,需在客户端渲染。
基于 Kbd 组件: 内部使用 Kbd 和 KbdGroup 组件渲染按键。

📘 完整交互式示例与控件属性请查看 Storybook 文档。