Tabs

التثبيتنسخ رابط العنوان

الاستخدامنسخ رابط العنوان

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function RequestTabs() {
  return (
    <Tabs defaultValue="details">
      <TabsList aria-label="أقسام الطلب">
        <TabsTrigger value="details">التفاصيل</TabsTrigger>
        <TabsTrigger value="documents">المستندات</TabsTrigger>
        <TabsTrigger value="history">السجل</TabsTrigger>
      </TabsList>
      <TabsContent value="details">اسم مقدم الطلب والخدمة وتاريخ التقديم.</TabsContent>
      <TabsContent value="documents">ملفان مرفقان.</TabsContent>
      <TabsContent value="history">قُدّم في ٤ نوفمبر ٢٠٢٦.</TabsContent>
    </Tabs>
  );
}

استخدم Tabs لتقسيم صفحة واحدة إلى أجزاء مترابطة تُقرأ واحدًا بعد آخر: تفاصيل الطلب ومستنداته وسجله. ولا تغيّر التبويبات الصفحة: وللانتقال بين الصفحات استخدم روابط أو قائمة تنقل. والتبويبات ليست خطوات؛ فللتسلسل استخدم مؤشر خطوات. يحتاج كل TabsTrigger إلى value، ويكون TabsContent بالقيمة نفسها لوحته. وأعط القائمة aria-label إن كان في الصفحة أكثر من قائمة.

البنيةنسخ رابط العنوان

• القائمة (role="tablist"): صف التبويبات، وتحتها فاصل بسمك 3px (divider). وتُمرَّر جانبيًا إن لم تتسع التبويبات.
• التبويب (role="tab"): أيقونة اختيارية وتسمية. والتبويب المحدد بخط عريض مع شريط بسمك 3px بلون border-primary.
• اللوحة (role="tabpanel"): محتوى التبويب المحدد.

أمثلةنسخ رابط العنوان

الأحجام والأيقوناتنسخ رابط العنوان

قيمة size إما sm أو md (الافتراضي) أو lg. ضع أيقونة قبل التسمية. ويمكن الوصول إلى التبويب المعطّل بمفاتيح الأسهم لكن لا يمكن تحديده.

عمودينسخ رابط العنوان

يضع orientation="vertical" القائمة بجانب اللوحة، والشريط في جهة النهاية. ويتنقل أعلى وأسفل بين التبويبات.

السلوكنسخ رابط العنوان

افتراضيًا يحرّك مفتاح السهم التركيز ويحدد التبويب. اضبط activateOnFocus={false} على TabsList للتفعيل اليدوي: تحرّك الأسهم التركيز فقط، ويحدد Enter أو Space التبويب. وتزيل divider={false} الخط تحت القائمة، وتزيل flush الحشوة الجانبية، ويجعل value مع onValueChange التحديد في يدك.

RTLنسخ رابط العنوان

تبدأ القائمة من اليمين ويتبادل السهمان يمين ويسار: فبالعربية ينقل اليسار إلى التبويب التالي. وتقرأ المكوّنات الاتجاه من <html dir> بنفسها، فلا تلفّها بموفّر.

إمكانية الوصولنسخ رابط العنوان

• مبنية على Base UI Tabs: role="tablist" وtab وtabpanel، مع aria-selected وaria-controls وaria-orientation. والتبويب المحدد وحده في ترتيب Tab (تركيز متنقل).
• يفتح التبويب لوحته بمجرد تركيزه. واللوحة نفسها قابلة للتركيز، فيصل مستخدم لوحة المفاتيح إلى محتوى لا يحوي عنصرًا قابلًا للتركيز.
• يظهر التبويب المحدد بخط عريض وشريط لا باللون وحده. والنص بنسبة 4.5:1 والأيقونات والشريط 3:1 أو أفضل على كل سطح، فاتحًا وداكنًا. والتركيز حد بسمك 2px داخل التبويب.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• علامة التبويب «المزيد» (قائمة فائض في التبويبات الأفقية) غير مبنية. وتُمرَّر القائمة جانبيًا بدلًا منها إن لم تتسع؛ ولقائمة فائض ضع Menu في آخر تبويب.
• تعرض التبويبات العمودية أيضًا شريطًا محايدًا عند التمرير والضغط (كما في CSS لـ DGA)؛ ويعرض كل تبويب الشريط الأساسي عند تحديده.

التبايننسخ رابط العنوان