مفتاح التبديل

مفتاح تبديل قابل للوصول مبني على React Aria - دلالات تبديل أصلية، دعم لوحة المفاتيح وحلقة تركيز مرئية. شكلان (حبة دواء ومستطيل) بثلاثة أحجام. تستخدم حالة التشغيل التدرج الأساسي مع حلقة داخلية وشريحة زرقاء صغيرة بارزة في الإبهام، مطابقة لـ Figma 1:1.

التثبيت

يمكنك إضافة مكوّن التبديل هذا باستخدام CLI أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add switch

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

الأشكال

شكلان عبر shape الخاصية. pill (الافتراضي) مستدير بالكامل؛ rectangle يستخدم radius/md على المسار و radius/xs على الإبهام، كلاهما مُقيَّس حسب الحجم. الشريحة الداخلية للإبهام تتبع نفس الشكل.

<Switch shape="pill" defaultSelected /> {/* fully rounded (default) */}

الأحجام

ثلاثة أحجام عبر size الخاصية - lg (56×32), md (42×24، الافتراضي) و sm (28×16). يتناسب الإبهام والحشو ومسافة التنقل وحلقة الحالة النشطة معًا.

<Switch size="lg" defaultSelected /> {/* 56 × 32 */}

الحالات والتسميات

استخدام isSelected + onChange لمفتاح تبديل متحكَّم به، أو defaultSelected للوضع غير المتحكم به. isDisabled يُعتِم عنصر التحكم إلى 50%. مرِّر children لتسمية - يربطها React Aria بالحقل، لذا يؤدي النقر على النص إلى تبديل المفتاح.

{/* Controlled */}<Switch isSelected={enabled} onChange={setEnabled} />
{/* Disabled */}<Switch isDisabled defaultSelected />
{/* With label (react-aria associates it automatically) */}<Switch>Auto-sync to cloud</Switch>

بطاقة

بطاقة إعدادات قابلة للتحديد - أيقونة قيادية اختيارية بحجم 24×24، وعنوان ووصف مختصر على اليسار، والمفتاح على اليمين. تبدّل البطاقة بأكملها وتُظهر خلفية عند التمرير، وهي النظير المفتاحي لـ CheckboxCard. مرّر أي رمز من Remix عبر icon إلى SwitchCard.

الإشعارات الفوريةتنبيهات للنشاط المهم.ملخص أسبوعيملخص كل يوم الاثنين.المظهر الداكن

import { RiNotification4Line, RiMoonLine } from "@remixicon/react";import { SwitchCard } from "@/components/base/switch/switch-card";
export function Example() {  return (    <div className="flex max-w-md flex-col gap-4">      <SwitchCard        icon={RiNotification4Line}        title="Push notifications"        description="Get notified when something needs your attention."        defaultSelected      />      {/* icon is optional - pass the component reference, not <RiMoonLine /> */}      <SwitchCard icon={RiMoonLine} title="Dark mode" />    </div>  );}