تبويبات
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.