72Başlayın
HextaUI

Kbd

Kısayollar için, her platformda doğru simgeleri gösteren, düzgün sesli okunan ve gerçek tuşlar gibi basılan tuş başlıkları.

ShiftCommandP

Press Command K to search, or hold Shift and watch the keys.

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

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-6 text-sm text-muted-foreground">
      <KbdGroup keys="mod+shift+p" size="lg" listen />
      <p>
        Press <Kbd keys="mod+k" listen /> to search, or hold{" "}
        <Kbd keys="shift" listen /> and watch the keys.
      </p>
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Kbd, KbdGroup } from "@/components/ui/kbd"
<KbdGroup keys="mod+k" />
<Kbd keys="escape" />
<Kbd>K</Kbd>

Kısayolları keys ile bir kez yazın; Mac'te ⌘K, Windows ve Linux'ta Ctrl K olarak görünür. Ya da tam denetim için alt öğe olarak herhangi bir içerik verin.

Kompozisyon

Kbd

KbdGroup
└── Kbd

Örnekler

Varyantlar

keycap ince bir kenara ve 1px'lik bir çıkıntıya sahiptir, böylece fiziksel bir tuş gibi görünür. flat, menüler gibi yoğun yerler için sakin bir dolgudur.

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

export function KbdVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <KbdGroup keys="mod+c" />
      <KbdGroup keys="mod+c" variant="flat" />
    </div>
  )
}

Boyutlar

sm küçük metinde, default gövde metninin yanında, lg ise başlıklarda veya tek başına durur.

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

const sizes = ["sm", "default", "lg"] as const

export function KbdSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      {sizes.map((size) => (
        <KbdGroup key={size} keys="mod+shift+z" size={size} />
      ))}
    </div>
  )
}

Kısayollar

<KbdGroup /> bir kombinasyonu tuş başına bir tuş başlığına böler. Boşluk bir diziyi başlatır ve separator ile birleştirilir. keys ile kullanılan <Kbd /> tüm kombinasyonu tek bir başlıkta tutar.

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

const shortcuts = [
  { label: "Command palette", keys: "mod+k" },
  { label: "Move line up", keys: "alt+up" },
  { label: "Close", keys: "escape" },
  { label: "Go to dashboard", keys: "g d" },
]

export function KbdShortcuts() {
  return (
    <dl className="grid w-full max-w-xs grid-cols-[1fr_auto] items-center gap-x-6 gap-y-3 text-sm">
      {shortcuts.map((shortcut) => (
        <div key={shortcut.keys} className="contents">
          <dt className="text-muted-foreground">{shortcut.label}</dt>
          <dd>
            <KbdGroup keys={shortcut.keys} />
          </dd>
        </div>
      ))}
      <dt className="text-muted-foreground">Save, as one cap</dt>
      <dd>
        <Kbd keys="mod+s" />
      </dd>
    </dl>
  )
}

Canlı tuşlar

listen ile gerçek tuşa basılı tutulurken tuş başlığı basılır. Yalnızca izler; yazdıklarınızı asla engellemez, geciktirmez veya değiştirmez. Harfler fiziksel tuşa göre eşleşir, bu yüzden Option ve Shift karışmaz.

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

const rows = ["qwertyuiop", "asdfghjkl", "zxcvbnm"]

export function KbdListen() {
  return (
    <KbdGroup listen size="lg" className="flex-col">
      {rows.map((row) => (
        <span key={row} className="flex gap-1">
          {row.split("").map((key) => (
            <Kbd key={key}>{key.toUpperCase()}</Kbd>
          ))}
        </span>
      ))}
      <span className="flex gap-1">
        <Kbd keys="shift" />
        <Kbd keys="space" className="min-w-40" />
        <Kbd keys="enter" />
      </span>
    </KbdGroup>
  )
}

Düğme içinde

Düğmenin içinde tuş başlığı renklerini düğmenin metninden alır, böylece her varyanta uyar.

import { IconSearch } from "@tabler/icons-react"

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

export function KbdButton() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="outline">
        <IconSearch data-icon="inline-start" />
        Search
        <Kbd keys="mod+k" />
      </Button>
      <Button>
        Save
        <Kbd keys="mod+s" />
      </Button>
      <Button variant="ghost">
        Undo
        <Kbd keys="mod+z" variant="flat" />
      </Button>
    </div>
  )
}

Simgeler ve eylemler

Tuş adı olmayan eylemler için tuş başlığına simge koyun ve görsel olarak gizli bir etiket verin.

import { IconArrowBackUp, IconClick } from "@tabler/icons-react"

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

export function KbdComposed() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">
      <p className="flex items-center gap-2">
        <KbdGroup>
          <Kbd keys="shift" />
          <Kbd>
            <IconClick aria-hidden="true" />
            <span className="sr-only">Click</span>
          </Kbd>
        </KbdGroup>
        to select a range
      </p>
      <p className="flex items-center gap-2">
        <Kbd>
          <IconArrowBackUp aria-hidden="true" />
          <span className="sr-only">Backspace</span>
        </Kbd>
        to go back
      </p>
    </div>
  )
}

Sağdan sola

Kısayollar, klavyede basıldığı gibi, sağdan sola metin içinde de soldan sağa sırada kalır.

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

export function KbdRtl() {
  return (
    <p
      dir="rtl"
      className="flex items-center gap-2 text-sm text-muted-foreground"
    >
      اضغط
      <KbdGroup keys="mod+shift+p" />
      لفتح لوحة الأوامر، أو <Kbd keys="escape" /> للإغلاق
    </p>
  )
}

Erişilebilirlik

  • ⌘ ve ⇧ gibi semboller ekran okuyuculardan gizlenir ve adlarıyla değiştirilir; böylece keys="mod+shift+p" "Command Shift P" olarak okunur.
  • Tuş başlıkları <kbd> olarak işlenir, grup ise bunları başka bir <kbd> içine yerleştirir; HTML'de tuş kombinasyonu bu şekilde işaretlenir.
  • Bir kısayolu göstermek onu bağlamaz. Tuş işleyicisini kendiniz kaydedin.
  • Basma efekti yalnızca dekorasyondur; azaltılmış hareket açıkken hareket yerine renk değişimi kullanılır. Hydration öncesinde her platform Apple sembollerini görür.

API referansı

Her iki parça da bir <kbd> işler ve render ile onun niteliklerini kabul eder.

Kbd

PropTürVarsayılan
keys"mod+shift+p" gibi + ile birleştirilen tuşlar. mod, Apple cihazlarında ⌘, diğerlerinde Ctrl'dür. alt, enter, escape, up ve space gibi adlar simgelere veya kısa sözcüklere dönüşür ve ekran okuyucular için okunabilir bir ad alır.
string–
variantAyarlanmadığında KbdGroup'tan devralınır.
"keycap" | "flat""keycap"
sizeAyarlanmadığında KbdGroup'tan devralınır.
"sm" | "default" | "lg""default"
listenGerçek tuşu basılı tutulurken tuş başlığını bastırır. keys ile veya alt öğe olarak düz bir tuş adıyla çalışır.
booleanfalse
render
ReactElement | (props, state) => ReactElement<kbd>
ÖznitelikAçıklama
data-slot="kbd"CSS'te tuş başlıklarını hedefler.
data-variantGeçerli varyant.
data-sizeGeçerli boyut.
data-pressedGerçek tuşa basılı tutulurken bulunur.

KbdGroup

PropTürVarsayılan
keys"mod+shift+p" gibi + ile birleştirilen tuşlar. mod, Apple cihazlarında ⌘, diğerlerinde Ctrl'dür. alt, enter, escape, up ve space gibi adlar simgelere veya kısa sözcüklere dönüşür ve ekran okuyucular için okunabilir bir ad alır. Boşluklar bir dizinin adımlarını ayırır.
string–
separatorBir dizinin adımları arasında gösterilir.
ReactNode"then"
variantİçerideki her tuş başlığına iletilir.
"keycap" | "flat"–
sizeİçerideki her tuş başlığına iletilir.
"sm" | "default" | "lg"–
listenİçerideki her tuş başlığına iletilir.
boolean–
render
ReactElement | (props, state) => ReactElement<kbd>
ÖznitelikAçıklama
data-slot="kbd-group"CSS'te grupları hedefleyin.
data-slot="kbd-separator"Dizi adımları arasındaki metin.

İlgili

Kullanıldığı bloklar

Kbd üzerine kurulan bloklar.