البناء · جديد

التبويبات

تنقّل بين عروض متكافئة للمحتوى نفسه دون مغادرة الصفحة؛ تبويب واحد ظاهر في كل مرة.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/tabs

الاعتماديات التي يضيفها: @base-ui/react

الاستخدام

import { Tab, Tabs, TabsList, TabsPanel } from "@/components/ui/tabs";

<Tabs defaultValue="overview">
  <TabsList aria-label="Account">
    <Tab value="overview">Overview</Tab>
    <Tab value="transactions">Transactions</Tab>
  </TabsList>
  <TabsPanel value="overview">…</TabsPanel>
  <TabsPanel value="transactions">…</TabsPanel>
</Tabs>

أمثلة

نوع الزر

تعبئة على التبويب المحدد وخطوط فاصلة بين البقية؛ يناسب أشرطة الأدوات المدمجة.

عمودية

عمود للإعدادات على الشاشات العريضة، يتحول إلى صف أفقي قابل للتمرير على الهاتف.

أيقونات وشارات

أيقونة على كل التبويبات أو لا شيء، وعدد بعد التسمية.

المقاسات

‏breakpoint يثبّت مقاس سطح المكتب (16) أو الهاتف (14)؛ الافتراضي auto يتبع الشاشة.

مرجع الخصائص

Tabs

الخاصية	النوع	الافتراضي	الوصف
`type`	`"underline" \| "button"`	`"underline"`	خاصية Type: خط سفلي تحت المحدد، أو تعبئة عليه.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	‏Horizontal tabs أو Vertical tabs في Figma.
`breakpoint`	`"auto" \| "desktop" \| "mobile"`	`"auto"`	خاصية Breakpoint. ‏`auto` مقاس الهاتف تحت `md` وسطح المكتب من `md`، وفيه تصبح العمودية صفًا على الهاتف.
`dividers`	`boolean`	`true`	خاصية Show line divider: خطوط بين تبويبات الزر الأفقية.
`value / defaultValue`	`string`		التبويب المحدد (متحكَّم به أو أولي).
`onValueChange`	`(value) => void`		يُستدعى عند اختيار تبويب.

TabsList

الخاصية	النوع	الافتراضي	الوصف
`aria-label`	`string`		اسم مجموعة التبويبات لقارئ الشاشة.
`activateOnFocus`	`boolean`	`true`	يختار التبويب بمجرد وصول الأسهم إليه. أوقفه إذا كان تحميل اللوحة بطيئًا.

Tab

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`		يطابق `value` في لوحته.
`children`	`ReactNode`		خاصية Label: كلمة أو كلمتان على سطر واحد.
`iconLeading`	`IconComponent`		خاصيتا Icon وLeading icon.
`badge`	`number \| string`		خاصية Badge وعددها: شارة Brand بعد التسمية.
`disabled`	`boolean`	`false`	ليست في Figma: تبويب لا يمكن اختياره بعد.

TabsPanel

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`		يطابق `value` في تبويبه؛ تُخفى اللوحة ما لم يكن تبويبها محددًا.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	يدخل القائمة على التبويب المحدد، والضغطة التالية تنتقل إلى اللوحة.
`ArrowRightArrowLeft`	ينتقل إلى التبويب التالي أو السابق ويختاره، ويلتف عند الطرفين. في العربية ينعكس الاتجاه؛ في العمودية ArrowDown وArrowUp.
`HomeEnd`	إلى أول تبويب أو آخره.

ARIA

‏role="tablist" باسم من aria-label، وكل تبويب role="tab" مع aria-selected ومرتبط بلوحته role="tabpanel".
الأيقونة زخرفية، والعدد في الشارة جزء من اسم التبويب.
للتنقل بين صفحات أو خطوات استخدم الروابط أو مؤشر الخطوات، لا التبويبات.

ملاحظات العربية والاتجاه

ينعكس

أول تبويب على اليمين، والأسهم معكوسة: ArrowLeft للتالي.
في العمودية يكون العمود والخط المحدد على اليمين، واللوحة على يساره.
الصف القابل للتمرير يبدأ من اليمين ويمرَّر إلى اليسار.

لا ينعكس

الأيقونات الزخرفية تبقى كما هي، إلا أيقونات الاتجاه في قائمة الانعكاس.

الأرقام: عدد الشارة يتبع إعداد الأرقام (٠-٩ أو 0-9).
الخط العربي: ‏body-16 أو body-14 بوزن Semibold، وارتفاع أدنى لا ثابت لأن أسطر العربية أطول.
النص ثنائي الاتجاه: تسمية التبويب لا تنكسر على سطرين. اسم علامة إنجليزي داخل تسمية عربية يوضع في <bdi>.

كل المكونات ›