基础组件

键盘按键

用于展示键盘按键或快捷键的样式组件，支持单个按键和组合键两种形式。

安装

bash

npx polyui add kbd

基础用法

使用 Kbd 展示单个按键，使用 KbdGroup 将多个按键组合在一起。

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"

export function Example() {
  return (
    <div className="flex items-center gap-3">
      {/* Single key */}
      <Kbd>⌘K</Kbd>

      {/* Key combination */}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>

      {/* Three-key shortcut */}
      <KbdGroup>
        <Kbd>⇧</Kbd>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  )
}

预览链接

⌘KCtrlS⇧⌘PAltF4

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"
export function KbdPreview() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Kbd>⌘K</Kbd>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>⇧</Kbd>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Alt</Kbd>
        <Kbd>F4</Kbd>
      </KbdGroup>
    </div>
  )
}

提示

Kbd 在 Tooltip 内部会自动调整配色以保持对比度。

tsx

import { Kbd, KbdGroup } from "@polyui/react/kbd"
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@polyui/react/tooltip"
export function KbdTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger className="text-sm underline underline-offset-4 cursor-default">Search</TooltipTrigger>
        <TooltipContent>
          Open search{" "}
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

属性 — Kbd

属性	类型	默认值	说明
`className`	`string`	`—`	自定义样式类名
`children`	`React.ReactNode`	`—`	按键内容，通常为字符或符号

属性 — KbdGroup

属性	类型	默认值	说明
`className`	`string`	`—`	自定义样式类名
`children`	`React.ReactNode`	`—`	包含多个 Kbd 的组合