سوئیچر (Switcher)
کامپوننت سوئیچر به عنوان جایگزینی برای چکباکس تکتک استفاده میشود، که میتواند بین حالت فعال یا غیرفعال تغییر کند.
پایه (Basic)
مثال پایه برای سوئیچر.
محتوا (Content)
سوئیچر میتواند محتوای مختلفی در حالت فعال یا غیرفعال داشته باشد.
غیرفعال (Disabled)
برای غیرفعال کردن سوئیچر،
disabled را به true تنظیم کنید.در حال بارگذاری (Loading)
میتوانیم
isLoading را به true تنظیم کنیم و وضعیت سوئیچر را در حالت در حال انتظار قرار دهیم.رنگها (Colors)
میتوانیم رنگ سفارشی را از طریق
color به سوئیچر اعمال کنیم.کنترلی (Controlled)
مثال کنترلشده.
API
سوئیچر (Switcher)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| checked | آیا سوئیچر انتخاب شده است؟ | boolean | - |
| checkedContent | محتوای نمایش داده شده زمانی که وضعیت سوئیچر انتخاب شده باشد | string | ReactNode | - |
| defaultChecked | آیا وضعیت اولیه سوئیچر انتخاب شده است؟ | boolean | - |
| disabled | آیا سوئیچر غیرفعال است؟ | boolean | - |
| isLoading | آیا سوئیچر در حال بارگذاری است؟ | boolean | false |
| labelRef | مرجع برچسب سوئیچر | string | - |
| name | نام فیلد ورودی سوئیچر | string | - |
| onChange | فراخوانی هنگام تغییر مقدار سوئیچر | (checked: boolean, e: MouseEvent) => void | - |
| readOnly | آیا سوئیچر فقط خواندنی است؟ | boolean | - |
| switcherClass | CSS سفارشی برای سوئیچر | string | رنگ تم جاری |
| unCheckedContent | محتوای نمایش داده شده زمانی که وضعیت سوئیچر انتخاب نشده باشد | string | ReactNode | - |