КомпонентыProНовое
Глянцевый переключатель
Объёмный переключатель с тяжёлой ручкой: она переезжает и открывает светящееся окошко. Работает как обычный чекбокс, с клавиатуры тоже.
Настройки
accentColor
Основано на witty-fly-56 by csemszepp (MIT лицензия) · Условия использования
Параметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| defaultChecked | boolean | true | Включён ли переключатель в начале. |
| checked | boolean | — | Состояние под вашим управлением. Без него переключатель помнит состояние сам. |
| onCheckedChange | (checked: boolean) => void | — | Вызывается с новым состоянием после каждого щелчка. |
| width | number | 160 | Ширина в пикселях, высота равна ширине, делённой на 2,5. |
| accentColor | string | "#f5f5f5" | Цвет светящегося окошка во включённом состоянии. |
| duration | number | 0.6 | Секунд на переезд ручки. |
| disabled | boolean | false | Отключить переключатель. |
| label | string | "Toggle" | Название переключателя для экранных читалок. |
| className | string | — | Классы для обёртки. |
Зависимости
Пакетов: 2
npm install clsx tailwind-merge