键盘按键

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

将以下代码复制到你的项目中。

View complete source: components/ui/kbd.tsx

根据项目配置更新导入路径。

用法

import { Kbd } from "@/components/ui/kbd"

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Group

Use the KbdGroup component to group keyboard keys together.

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
className	string	``

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
className	string	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>