مفتاح

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

export function KbdDemo() {

يعرض مكون kbd غطاء مفتاح — وهو عنصر <kbd> element أصلي مُصمم بدون أي تبعيات أولية، مصمم وفقًا لـ«وصفة النيوبروتالية»: حدود سميكة، وظل قوي، وخط أحادي. ويشمل كلا النوعين من الخلفية نفس الملف.

استخدمه عندما:

• لوحات الأوامر والبحث — اعرض تلميح ⌘ K بجوار الزر المشغّل أو داخل حقل الإدخال.
• عناصر القائمة وتلميحات الأدوات — ضع الاختصار بجانب تسمية الإجراء حتى يتعلمه المستخدمون في مكانه.
• الوثائق وسجلات التغييرات — أشر إلى ضغطات المفاتيح الدقيقة في النص مباشرةً دون الحاجة إلى لقطات شاشة.

التثبيت#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
نسخ

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

الاستخدام#

نسخimport { Kbd } from "@/components/ui/kbd"

نسخ<Kbd>Ctrl</Kbd>

التركيب#

استخدم التركيب التالي لبناء Kbd وKbdGroup:

نسخKbd
KbdGroup
├── Kbd
└── Kbd

أمثلة#

مجموعة#

استخدم مكوّن KbdGroup لتجميع مفاتيح لوحة المفاتيح معًا.

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

export function KbdGroupExample() {

زر#

استخدم مكوّن Kbd داخل مكوّن Button لعرض مفتاح لوحة مفاتيح داخل زر.

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

تلميح#

يمكنك استخدام مكوّن Kbd داخل مكوّن Tooltip لعرض تلميح يحتوي على مفتاح لوحة مفاتيح.

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

مجموعة إدخال#

يمكنك استخدام مكوّن Kbd داخل مكوّن InputGroupAddon لعرض مفتاح لوحة مفاتيح داخل مجموعة إدخال.

import { SearchIcon } from "lucide-react"

import {

RTL#

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول#

يقوم Kbd بعرض عنصر <kbd> أصلي — وهو الدلالة الصحيحة في HTML لإدخال البيانات عبر لوحة المفاتيح — وهو عنصر عرضي بحت: أما pointer-events-none وselect-none، فلا يمكن تركيز المؤشر عليهما. عندما يعمل الاختصار فعليًا، قم أيضًا بتعريفه على عنصر التحكم الذي يتولى معالجته عبر aria-keyshortcuts (على سبيل المثال، aria-keyshortcuts="Control+B" على الزر) حتى تتمكن التقنيات المساعدة من الإعلان عنه. يتم الإعلان عن رموز الحروف مثل ⌘ بشكل غير متسق بواسطة قارئات الشاشة — لذا قم بتلاوة أسماء المفاتيح حرفياً في الأماكن التي يكون فيها الاختصار مهماً.

مرجع API#

Kbd#

استخدم مكوّن Kbd لعرض مفتاح لوحة مفاتيح.

نسخ<Kbd>Ctrl</Kbd>

KbdGroup#

استخدم مكوّن KbdGroup لتجميع مكوّنات Kbd معًا.

نسخ<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>