زر تبديل
Toggleزر تبديل ثنائي الحالة في React لأشرطة الأدوات وأدوات التنسيق، بأنماط وأحجام. يعرض aria-pressed ويدعم الاستخدام بأيقونة فقط مع تسمية.
يحفظ Toggle حالة الضغط، مثل زر تنسيق أو تثبيت. الأزرار بأيقونة فقط تحتاج aria-label، وللإعدادات استخدم Switch.
متى تستخدمه
استخدم Toggle لأداة تكون مضغوطة أو غير مضغوطة ويسري أثرها فورًا، مثل الخط العريض في محرّر أو تثبيت عنصر. لإعداد يُقرأ على أنه مفعّل أو معطّل استخدم Switch. لاختيار عرض من عدّة عروض استخدم ContentSwitcher أو Tabs.
اجمع أزرار التبديل المتقاربة في شريط أدوات واحد ليفهم المستخدم أنها تعمل على المحتوى نفسه.
أمثلة
الخصائص
الخصائص التي يعرّفها Toggle. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "outline" | "default" | ||
size | "sm" | "md" | "lg" | ||
asChild | boolean | ||
pressed | boolean | The controlled state of the toggle. | |
defaultPressed | boolean | false | The state of the toggle when initially rendered. Use defaultPressed
if you do not need to control the state of the toggle. |
onPressedChange | (pressed: boolean) => void | The callback that fires when the state of the toggle changes. |
إمكانية الوصول
Toggle زر أصلي يعرض حالته عبر aria-pressed، فيعلن قارئ الشاشة «مضغوط» أو «غير مضغوط». يقلب مفتاحا Space وEnter الحالة.
أزرار التبديل ذات الأيقونة فقط تحتاج aria-label يسمّي الأداة لا الحالة؛ فالحالة تأتي من aria-pressed. حالة الضغط تغيّر التعبئة إلى جانب اللون، فلا تعتمد على اللون وحده.