البناء · جديد

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

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

المعاينة

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

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

npx shadcn@latest add @ritla/switch

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

import { Switch } from "@/components/ui/switch";

<Switch name="alerts" defaultChecked description="Notify me when a price moves 5%">
  Price alerts
</Switch>

icon يضع علامة صح أو X في المقبض، وsize="sm" المفتاح الصغير، وdisabled يعطّله، وlabel يضع تسمية فوق الصف ويجعله مجموعة مسمّاة.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: اسم الإعداد، لا حالته.
`checked / defaultChecked`	`boolean`		خاصية Value: ‏On أو Off.
`onCheckedChange`	`(checked: boolean) => void`		عند التبديل.
`description`	`ReactNode`		خاصية Show hint support: سطر مساعد.
`label`	`ReactNode`		خاصية Show label: تسمية فوق الصف.
`size`	`"md" \| "sm"`	`"md"`	المسار 52×32 أو 32×20.
`icon`	`boolean`	`false`	خاصية Icon: صح عند التشغيل وX عند الإيقاف.
`disabled`	`boolean`		State = Disabled.
`name / value`	`string`		للنماذج: تُرسل القيمة وهو مفعّل.

الخاصية	النوع	الافتراضي	الوصف
`aria-label / aria-labelledby`	`string`		المسار والمقبض وحدهما لبناء صفوف خاصة؛ سمِّه.

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

المفتاح	ما يفعله
`Space`	يبدّل الحالة.
`Enter`	يبدّل الحالة أيضًا.

role="switch" مع aria-checked، مسمّى بنص الصف ومرتبط بسطره المساعد؛ النقر على النص يبدّله.
مساحة اللمس ٤٨ بكسل على الأقل حتى في المقاس الصغير.
داخل نموذج له زر إرسال استخدم مربع التفعيل.

الأرقام: الأرقام في النصوص تتبع numerals عبر formatNumber.
الخط العربي: النص label-16 بوزن Medium، والسطر المساعد label-12؛ الصف يطول مع ارتفاع السطر العربي.