کلید
switchکامپوننتروشن و خاموش با انیمیشن؛ در RTL دستگیره سمت درست میرود.
- اعلان ایمیلی
- احراز هویت دومرحلهای
- حالت آزمایشی
نصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add switchنصب دستی
محتوای تب «کد» را در
components/ui/switch.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Switch } from "@/components/ui/switch"23<label className="flex items-center justify-between">4 <span>اعلان ایمیلی</span>5 <Switch defaultChecked onCheckedChange={setEmail} />6</label>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| checked / defaultChecked | boolean | - | کنترلشده یا آزاد. |
| onCheckedChange | (checked: boolean) => void | - | هنگام تغییر. |
نکتههای راستچین
- در RTL حالت «روشن» یعنی دستگیره سمت چپ؛ با translate منفی پیاده شده تا با dir هماهنگ بماند.