دکمهی فشاری
toggleکامپوننتدکمهی دووضعیتی مثل «پررنگ» یا «فقط موجود» و گروهش که یا مثل رادیو یکی را نگه میداره یا مثل چکباکس چند تا را.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add toggleنصب دستی
محتوای تب «کد» را در
components/ui/toggle.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Toggle, ToggleGroup } from "@/components/ui/toggle"2import { Bold, Italic, Underline } from "lucide-react"34<Toggle aria-label="پررنگ"><Bold /></Toggle>56<ToggleGroup7 type="single"8 defaultValue="all"9 items={[{ value: "all", label: "همه" }, { value: "instock", label: "موجود" }, { value: "sale", label: "تخفیفدار" }]}10/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| pressed / onPressedChange | boolean | - | وضعیت دکمهی تکی. |
| type | "single" | "multiple" | "single" | در گروه: یکی یا چند تا. در single میتونید همان یکی را هم خاموش کنید. |
| items | { value; label; aria-label?; disabled? }[] | - | گزینههای گروه. برای آیکونهای تنها aria-label بدید. |
| variant | "default" | "outline" | "default" | outline دور دکمه یا دور کل گروه خط میکشه. |
| size | "sm" | "md" | "lg" | "md" | ارتفاع ۳۲، ۳۶ یا ۴۰ پیکسل. |
نکتههای راستچین
- با Switch فرق داره. Switch یک تنظیم را روشن و خاموش میکنه و همان لحظه اعمال میشه، ولی Toggle یک حالت نمایش یا فیلتر را میگیره.
- کلیدهای چپ و راست بین اعضای گروه میگردن و در RTL چپ یعنی بعدی.