تب‌ها (Tabs)

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
2
3export default function BasicTabsExample() {
4  return (
5    <Tabs defaultValue="account">
6      <TabsList>
7        <TabsTrigger value="account">حساب کاربری</TabsTrigger>
8        <TabsTrigger value="password">رمز عبور</TabsTrigger>
9        <TabsTrigger value="billing">صورتحساب</TabsTrigger>
10      </TabsList>
11      <TabsContent value="account">
12        محتوای مربوط به حساب کاربری
13      </TabsContent>
14      <TabsContent value="password">
15        محتوای مربوط به تغییر رمز عبور
16      </TabsContent>
17      <TabsContent value="billing">
18        محتوای مربوط به اطلاعات صورتحساب
19      </TabsContent>
20    </Tabs>
21  );
22}
23

1import {
2  Tabs,
3  TabsList,
4  TabsTrigger,
5  TabsContent,
6} from "@/components/ui/tabs";
7import { User, Lock, CreditCard } from "lucide-react";
8
9export default function TabsWithIconsExample() {
10  return (
11    <Tabs defaultValue="account">
12      <TabsList>
13        <TabsTrigger value="account">
14          <User className="h-4 w-4 ms-2" />
15          حساب کاربری
16        </TabsTrigger>
17        <TabsTrigger value="password">
18          <Lock className="h-4 w-4 ms-2" />
19          رمز عبور
20        </TabsTrigger>
21        <TabsTrigger value="billing">
22          <CreditCard className="h-4 w-4 ms-2" />
23          صورتحساب
24        </TabsTrigger>
25      </TabsList>
26      <TabsContent value="account">محتوای حساب کاربری</TabsContent>
27      <TabsContent value="password">محتوای تنظیمات رمز عبور</TabsContent>
28      <TabsContent value="billing">محتوای صورتحساب</TabsContent>
29    </Tabs>
30  );
31}
32

1import {
2  Tabs,
3  TabsList,
4  TabsTrigger,
5  TabsContent,
6} from "@/components/ui/tabs";
7
8export default function FullWidthTabsExample() {
9  return (
10    <Tabs defaultValue="overview" fullWidth>
11      <TabsList>
12        <TabsTrigger value="overview">نمای کلی</TabsTrigger>
13        <TabsTrigger value="analytics">آنالیتیکس</TabsTrigger>
14        <TabsTrigger value="settings">تنظیمات</TabsTrigger>
15      </TabsList>
16      <TabsContent value="overview">محتوای نمای کلی</TabsContent>
17      <TabsContent value="analytics">محتوای آنالیتیکس</TabsContent>
18      <TabsContent value="settings">محتوای تنظیمات</TabsContent>
19    </Tabs>
20  );
21}
22

1import {
2  Tabs,
3  TabsList,
4  TabsTrigger,
5  TabsContent,
6} from "@/components/ui/tabs";
7
8export default function DisabledTabsExample() {
9  return (
10    <Tabs defaultValue="account">
11      <TabsList>
12        <TabsTrigger value="account">حساب کاربری</TabsTrigger>
13        <TabsTrigger value="password" disabled>
14          رمز عبور (غیرفعال)
15        </TabsTrigger>
16        <TabsTrigger value="billing">صورتحساب</TabsTrigger>
17      </TabsList>
18      <TabsContent value="account">محتوای حساب کاربری</TabsContent>
19      <TabsContent value="password">این تب غیرفعال است</TabsContent>
20      <TabsContent value="billing">محتوای صورتحساب</TabsContent>
21    </Tabs>
22  );
23}
24