زر تبديل
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 يعلن الحالة. تغير حالة الضغط التعبئة إلى جانب اللون، لذا لا تعتمد على اللون وحده.