المكوّنات
مفتاح لوحة المفاتيح
يعرض مفتاحًا أو اختصارًا بجانب الأمر الذي ينفّذه، في القوائم والتلميحات ونصوص المساعدة.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/kbdالاستخدام
import { Kbd, KeyboardShortcut } from "@/components/ui/kbd";<KeyboardShortcut keys={["Ctrl", "K"]} />
<Kbd size="lg">Enter</Kbd>أمثلة
مرجع الخصائص
Kbd
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | خاصية Label: اسم المفتاح كما هو مطبوع. | |
size | "sm" | "md" | "lg" | "md" | خاصية Size: 20 أو 24 أو 32 بكسل. |
KeyboardShortcut
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
keys | ReactNode[] | المفاتيح بالترتيب. | |
size | "sm" | "md" | "lg" | "md" | مقاس كل مفتاح. |
إمكانية الوصول
ARIA
- كل مفتاح
<kbd>، والاختصار<kbd>يضمّها. اكتب Ctrl لا ^ فقارئ الشاشة ينطق الأسماء. - ليست أزرارًا، ولا تعرضها في شاشات اللمس فقط.
ملاحظات العربية والاتجاه
ينعكس
- الجملة حول الاختصار تنعكس.
لا ينعكس
- ترتيب المفاتيح يبقى من اليسار لليمين داخل النص العربي (Ctrl ثم K).
- الأرقام
- المفاتيح كما هي مطبوعة، بلا تحويل للأرقام.
- الخط العربي
-
label-12بوزن Medium (وlabel-14في الكبير). - النص ثنائي الاتجاه
- الاختصار معزول باتجاه LTR.