البناء · جديد

بطاقة الإعداد

صف إعدادات يُشغَّل بمفتاح تبديل، بأيقونة في البداية وعنوان ونص داعم. الصف كله قابل للنقر.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/switch-card

import { SwitchCard } from "@/components/ui/switch-card";

<SwitchCard leading={BellIcon} defaultChecked description="Transfers, card payments and logins">
  Push notifications
</SwitchCard>

leading="switch" يضع المفتاح في بداية الصف.

الخاصية	النوع	الوصف
`children`	`ReactNode`	خاصية Headline: اسم الإعداد.
`overline / description / trailingText`	`ReactNode`	خصائص Overline وSupporting text وTrailing text.
`leading`	`IconComponent \| ReactNode \| "switch"`	خاصية Leading type.
`checked / defaultChecked / onCheckedChange`	`…`	كما في Switch.
`disabled`	`boolean`	State = Disabled.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Space`	يبدّل المفتاح؛ Tab ينتقل بين الصفوف.

الأيقونة في البداية (اليمين) والمفتاح في النهاية (اليسار)، كما يوصي Figma لقوائم الإعدادات.