جداکننده
separatorکامپوننتخط نازک افقی یا عمودی از توکن border، با متن وسطش برای جاهایی مثل «یا» بین دو روش ورود.
یا
ویرایشکپیحذف
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add separatorنصب دستی
محتوای تب «کد» را در
components/ui/separator.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Separator } from "@/components/ui/separator"23<Separator />4<Separator label="یا" />5<div className="flex h-5 items-center gap-3">6 <span>ویرایش</span><Separator orientation="vertical" /><span>حذف</span>7</div>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | عمودی داخل flex با self-stretch ارتفاع میگیره. |
| label | ReactNode | - | متن وسط خط افقی. |
| decorative | boolean | true | true یعنی برای صفحهخوان معنایی نداره. برای جداکنندهی معنادار false بدید تا role=separator بگیره. |