علامات التبويب (Tabs)

يعرض مكوّن علامات التبويب (Tabs) أقسامًا متعددة من المحتوى، ويُظهر لوحة واحدة في كل مرة.

التثبيت

bash

npx @smicolon/cli add tabs

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الحساب

عدّل بيانات حسابك من هنا.

مع علامة تبويب معطّلة

لديك طلبان قيد التوصيل.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`	لا يوجد	علامة التبويب النشطة عند التحكّم بالقيمة.
`defaultValue`	`string`	لا يوجد	علامة التبويب النشطة في البداية.
`onValueChange`	`(value) => void`	لا يوجد	تُستدعى عند تغيّر علامة التبويب النشطة.
`TabsTrigger`	`{ value, disabled }`	لا يوجد	زر علامة التبويب، وتحدد `value` لوحته.
`TabsContent`	`{ value }`	لا يوجد	اللوحة التي تظهر لقيمة `value`.
`className`	`string`	لا يوجد	أصناف (class) إضافية للجزء.

الاستخدام

tsx

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

// علامات تبويب بسيطة
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">الحساب</TabsTrigger>
    <TabsTrigger value="password">كلمة المرور</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    محتوى الحساب هنا.
  </TabsContent>
  <TabsContent value="password">
    محتوى كلمة المرور هنا.
  </TabsContent>
</Tabs>

// التحكّم بالقيمة
const [value, setValue] = useState("account")

<Tabs value={value} onValueChange={setValue}>
  ...
</Tabs>