البناء · جديد
بطاقة الاختيار
صف قائمة يُختار بمربع تفعيل، بأيقونة أو صورة في البداية وعنوان ونص داعم. الصف كله قابل للنقر.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/checkbox-cardالاستخدام
import { CheckboxCard } from "@/components/ui/checkbox-card";<CheckboxCard leading={CreditCardIcon} description="Ending 4242" trailingText="SAR 2,450">Everyday card</CheckboxCard>أمثلة
المربع في البداية والتعطيل
leading="checkbox" يضع المربع في البداية؛ disabled يطفئ الصف كله.
مرجع الخصائص
CheckboxCard
يقبل خصائص Checkbox للقيمة والحالة أيضًا.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | ReactNode | خاصية Headline. | |
overline / description / trailingText | ReactNode | خصائص Overline وSupporting text وTrailing text. | |
leading | IconComponent | ReactNode | "checkbox" | خاصية Leading type: أيقونة، أو عنصر (صورة رمزية أو صورة)، أو checkbox لوضع المربع في البداية. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| TabSpace | Tab إلى المربع، وSpace يبدّل. |
ARIA
- المربع مسمّى بالعنوان ومرتبط بالنص الداعم؛ الصف كله
<label>. - التركيز يلوّن الصف ويُظهر حلقة التركيز حول المربع.
ملاحظات العربية والاتجاه
ينعكس
- الأيقونة في البداية (اليمين) والمربع في النهاية (اليسار).
لا ينعكس
- الأيقونات غير الاتجاهية وعلامة الاختيار لا تنعكس.
- الأرقام
- المبالغ في النص الختامي تتبع
numeralsعبرformatNumber. - الخط العربي
- العنوان
body-16بوزن Medium، والسطر العلوي والنص الداعم12.