109k
新建

键盘快捷键 (Kbd)

上一个下一个

用于显示来自键盘的文本用户输入。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
⌘⇧⌥⌃Ctrl+B
import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

安装

pnpm dlx shadcn@latest add kbd

用法

import { Kbd } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd>

示例

分组

使用 KbdGroup 组件将多个键盘按键组合在一起。

使用 Ctrl + BCtrl + K 用于打开命令面板

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

export function KbdGroupExample() {

按钮

在 Button 组件内部使用 Kbd 组件，以便在按钮中显示键盘按键。

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

工具提示

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

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

输入框组

你可以在 InputGroupAddon 组件内部使用 Kbd 组件，以便在输入组中显示键盘按键。

⌘K
import {
  InputGroup,
  InputGroupAddon,

RTL (从右至左)

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

⌘⇧⌥⌃Ctrl+B
"use client"

import * as React from "react"

API 参考

键盘快捷键 (Kbd)

使用 Kbd 组件来显示键盘按键。

属性类型默认
classNamestring``
<Kbd>Ctrl</Kbd>

KbdGroup

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

属性类型默认
classNamestring``
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>