تب‌ها
tabsکامپوننتتبهای بخش‌بندی‌شده یا خطی که با کیبورد کار می‌کنن و جهت راست‌چین را رعایت می‌کنن. در حالت segmented یک قرص زیر تب فعال سر می‌خوره.
این‌جا پیش‌نمایش است.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add tabsنصب دستی
محتوای تب «کد» را در
components/ui/tabs.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"23<Tabs defaultValue="preview">4 <TabsList aria-label="نمایش">5 <TabsTrigger value="preview">پیش‌نمایش</TabsTrigger>6 <TabsTrigger value="code">کد</TabsTrigger>7 </TabsList>8 <TabsContent value="preview">…</TabsContent>9 <TabsContent value="code">…</TabsContent>10</Tabs>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| variant | "segmented" | "underline" | "segmented" | ظاهر فهرست تب‌ها. |
| value / defaultValue / onValueChange | string | - | کنترل تب فعال. |