مبدل المحتوى
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 إلى المجموعة، وتتنقل مفاتيح الأسهم بين المقاطع تبعاً لاتجاه القراءة في العربية.
يعرض ContentSwitcher المقطع المحدد للتقنيات المساعدة، ويظهر التحديد بتغيير التعبئة إلى جانب اللون.