تبها
tabsکامپوننتتبهای بخشبندیشده یا خطی که با کیبورد کار میکنن و جهت راستچین را رعایت میکنن.
اینجا پیشنمایش است.
نصب
با 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 | - | کنترل تب فعال. |