کنترل بخشی

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add segmented-control

2. نصب دستی

   محتوای تب «کد» را در components/ui/segmented-control.tsx بگذارید.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { SegmentedControl } from "@/components/ui/segmented-control"23<SegmentedControl4  aria-label="بازه"5  defaultValue="week"6  options={[{ value: "day", label: "روزانه" }, { value: "week", label: "هفتگی" }, { value: "month", label: "ماهانه" }]}7  onChange={setRange}8/>

پراپ‌ها

نکته‌های راست‌چین

• فرقش با Tabs اینه که محتوایی زیرش عوض نمیشه، فقط یک مقدار انتخاب میشه، مثل یک select کوچک با گزینه‌های کم.
• قرص از offsetLeft و offsetWidth خود دکمه اندازه گرفته میشه، پس در RTL هم درست زیر گزینه می‌نشینه و با تغییر اندازه دوباره اندازه‌گیری میشه.