تبويبات
Tabsتبويبات متاحة الوصول في React مبنية على Radix بقائمة تبويب متنقلة وأيقونات وأنماط بعرض كامل ومسطحة ومعالجة للفائض وتسميات عربية. تنقل مفاتيح الأسهم التركيز بين التبويبات.
يرتبط كل TabsTrigger بـ TabsContent عبر value، ويحدد defaultValue اللوحة الأولى. تنقل مفاتيح الأسهم التركيز بين التبويبات.
متى تستخدمه
استخدم Tabs لتقسيم صفحة واحدة إلى لوحات مترابطة تتشارك السياق، مثل تفاصيل الطلب ومستنداته وسجله. أبق تسميات التبويبات في كلمة أو كلمتين، وضع اللوحة الافتراضية أولاً.
للتبديل بين عروض البيانات نفسها، استخدم ContentSwitcher. للمحتوى الطويل الذي يجب أن يظهر كله، استخدم العناوين وAccordion.
أمثلة
الخصائص
الخصائص التي يعرفها Tabs. سمات العنصر الأصلي تمر كما هي.
<Tabs>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
asChild | boolean | ||
value | string | The value for the selected tab, if controlled | |
defaultValue | string | The value of the tab to select by default, if uncontrolled | |
onValueChange | (value: string) => void | A function called when a new tab is selected | |
orientation | "vertical" | "horizontal" | horizontal | The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down) |
dir | Direction | The direction of navigation between toolbar items. | |
activationMode | "manual" | "automatic" | automatic | Whether a tab is activated automatically or manually. |
<TabsList>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
fullWidth | boolean | ||
flush | boolean | ||
overflow | boolean | Collapse tabs that don't fit into a trailing "More" overflow menu (SDGA "More Tab"). Horizontal lists only - the list fills its container's inline size and pushes the overflow trigger to the trailing edge. | |
moreLabel | string | Accessible name for the overflow trigger when overflow is set. | |
asChild | boolean | ||
loop | boolean |
<TabsTrigger>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
startIcon | react.ReactNode | Leading icon, rendered before the label in a decorative (aria-hidden)
wrapper. Ignored when asChild is set - compose icons inside your own
element in that mode. | |
endIcon | react.ReactNode | Trailing icon (e.g. a count/badge glyph). Same rules as startIcon. | |
asChild | boolean | ||
valueإلزامي | string |
<TabsContent>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | ||
valueإلزامي | string | ||
forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
إمكانية الوصول
تتبع Tabs بنية التبويبات القياسية: role="tablist" وrole="tab" وrole="tabpanel"، مع إعلان التبويب المحدد. تنقل مفاتيح الأسهم التركيز بين التبويبات، ويقفز Home وEnd إلى الطرفين. تتبع مفاتيح الأسهم اتجاه القراءة عند استخدام الاتجاه من اليمين إلى اليسار.
أعط قائمة التبويب aria-label. تنتقل التبويبات الفائضة إلى قائمة "المزيد" التي تتحكم في تسميتها بـ moreLabel.