键盘

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

export function KbdDemo() {

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add kbd
Copy

用法

🌐 Usage

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

Copy<Kbd>Ctrl</Kbd>

示例

🌐 Examples

群组

🌐 Group

使用 KbdGroup 组件将键盘按键分组。

🌐 Use the KbdGroup component to group keyboard keys together.

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

export function KbdGroupExample() {

按钮

🌐 Button

在 Button 组件内使用 Kbd 组件，在按钮内显示一个键盘按键。

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

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

工具提示

🌐 Tooltip

你可以在 Tooltip 组件内使用 Kbd 组件来显示带有键盘按键的工具提示。

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

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

输入组

🌐 Input Group

你可以在 InputGroupAddon 组件内使用 Kbd 组件来在输入组中显示一个键盘键。

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

import {
  InputGroup,
  InputGroupAddon,

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

键盘

🌐 Kbd

使用 Kbd 组件显示一个键盘按键。

🌐 Use the Kbd component to display a keyboard key.

Copy<Kbd>Ctrl</Kbd>

KbdGroup

使用 KbdGroup 组件将 Kbd 组件组合在一起。

🌐 Use the KbdGroup component to group Kbd components together.

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