مبدّل المحتوى
ContentSwitcherأداة تحكّم مقسّمة في React للتبديل بين عروض متعارضة، بأحجام ونمط للأسطح الداكنة. تعمل بلوحة المفاتيح وفي الاتجاه العربي.
يختار ContentSwitcher طريقة عرض واحدة من مجموعة مقاطع. أعط المجموعة aria-label، وللوحات الصفحة الكاملة استخدم Tabs.
متى تستخدمه
استخدم ContentSwitcher للتنقّل بين عرضين إلى أربعة عروض بديلة للمحتوى نفسه، مثل قائمة أو خريطة، أو شهري أو سنوي. استخدم Tabs للوحات على مستوى الصفحة لكلٍّ منها محتواه، وRadioGroup داخل نموذج يُرسل الاختيار فيه لاحقًا.
اجعل التسميات قصيرة؛ فالمقاطع تتشارك صفًا واحدًا.
أمثلة
الخصائص
الخصائص التي يعرّفها ContentSwitcher. سمات العنصر الأصلي تمرّ كما هي.
<ContentSwitcher>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
onColor | boolean | ||
asChild | boolean | ||
value | string | The controlled stateful value of the item that is pressed. | |
defaultValue | string | The value of the item that is pressed when initially rendered. Use
defaultValue if you do not need to control the state of a toggle group. | |
onValueChange | (value: string) => void | The callback that fires when the value of the toggle group changes. | |
disabled | boolean | false | Whether the group is disabled from user interaction. |
rovingFocus | boolean | true | Whether the group should maintain roving focus of its buttons. |
loop | boolean | ||
orientation | "vertical" | "horizontal" | ||
dir | Direction |
<ContentSwitcherItem>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | ||
valueإلزامي | string | A string value for the toggle group item. All items within a toggle group should use a unique value. |
إمكانية الوصول
تحتاج المجموعة aria-label أو aria-labelledby ليُعلن غرضها. يصل مفتاح Tab إلى المجموعة وتنقل مفاتيح الأسهم بين المقاطع تبعًا لاتجاه القراءة في العربية.
المقطع المحدّد معروض للتقنيات المساعدة، ويظهر التحديد بتغيير التعبئة لا باللون وحده.