Download the PHP package besnovatyj/yii2-cms-switcher-column without Composer
On this page you can find all versions of the php package besnovatyj/yii2-cms-switcher-column. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download besnovatyj/yii2-cms-switcher-column
More information about besnovatyj/yii2-cms-switcher-column
Files in besnovatyj/yii2-cms-switcher-column
Package yii2-cms-switcher-column
Short Description Виджет переключателя статуса (column для GridView) для Yii2 CMS
License MIT
Informations about the package yii2-cms-switcher-column
Switchery Modern
Современная ES6 версия библиотеки Switchery без внешних зависимостей. Превращает стандартные HTML чекбоксы в красивые iOS-style переключатели.

✨ Особенности
- 🚀 Без зависимостей — чистый ES6, никаких внешних библиотек
- 📦 Легковесный — ~4KB минифицированный
- ♿ Доступность — поддержка клавиатуры и ARIA-атрибуты
- 📱 Мобильные устройства — оптимизировано для тач-интерфейсов
- 🎨 Кастомизация — гибкая настройка цветов, размеров и анимаций
- 🔄 Совместимость — полностью совместим с API оригинального Switchery
- 🌐 UMD модуль — работает с CommonJS, AMD и как глобальный объект
📥 Установка
Вариант 1: Прямое подключение
Вариант 2: ES6 модуль
Вариант 3: CommonJS
🚀 Быстрый старт
HTML
JavaScript
Готово! Чекбокс превратится в красивый переключатель 🎉
⚙️ Настройки
При создании экземпляра можно передать объект с настройками:
Таблица настроек
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
color |
string | '#64bd63' |
Цвет фона во включенном состоянии (HEX или RGB) |
secondaryColor |
string | '#dfdfdf' |
Цвет фона и границы в выключенном состоянии |
jackColor |
string | '#fff' |
Цвет ручки во включенном состоянии |
jackSecondaryColor |
string | null |
Цвет ручки в выключенном состоянии |
className |
string | 'switchery' |
CSS класс для контейнера |
disabled |
boolean | false |
Отключить взаимодействие |
disabledOpacity |
number | 0.5 |
Прозрачность (0-1) в отключенном состоянии |
speed |
string | '0.4s' |
Длительность анимации |
size |
string | 'default' |
Размер: 'small', 'default', 'large' |
📐 Размеры
| Размер | Ширина | Высота |
|---|---|---|
| small | 33px | 20px |
| default | 50px | 30px |
| large | 66px | 40px |
🎨 Кастомизация цветов
Базовые цвета
Цвета ручки
🔌 API
Методы экземпляра
isChecked()
Проверяет, включен ли переключатель.
isDisabled()
Проверяет, отключен ли переключатель.
enable()
Включает отключенный переключатель.
disable()
Отключает переключатель (делает недоступным для взаимодействия).
destroy()
Удаляет все обработчики событий. Используйте перед удалением элемента из DOM.
📡 События
Переключатель работает с нативным событием change на оригинальном чекбоксе:
Пример: реакция на изменение
💡 Примеры использования
Включенный по умолчанию
Отключенный переключатель
Внутри label
Переключатель корректно работает внутри <label>:
Множественные переключатели
Предотвращение повторной инициализации
Программное изменение состояния
Динамическое создание
Сохранение состояния в localStorage
♿ Доступность (Accessibility)
Switchery Modern поддерживает:
- Клавиатурная навигация — Tab для фокуса, Space/Enter для переключения
- ARIA-атрибуты —
role="switch",aria-checked - Фокус — видимый индикатор фокуса для клавиатурных пользователей
🌐 Поддержка браузеров
| Браузер | Поддержка |
|---|---|
| Chrome | ✅ 60+ |
| Firefox | ✅ 55+ |
| Safari | ✅ 12+ |
| Edge | ✅ 79+ |
| Opera | ✅ 47+ |
| IE | ❌ Не поддерживается |
Для поддержки старых браузеров используйте оригинальный Switchery или добавьте полифиллы для ES6.
🔧 Кастомизация CSS
Переопределение стилей
Использование кастомного класса
📝 Миграция с оригинального Switchery
Switchery Modern полностью совместим с оригинальной библиотекой. Просто замените файлы:
Весь существующий код будет работать без изменений.
🐛 Известные особенности
-
Размеры вычисляются после рендеринга — если переключатель создаётся в скрытом контейнере, позиция ручки может быть некорректной. Решение: инициализируйте после показа контейнера или вызовите
dispatchEvent(new Event('change')). - Внутри label — переключатель корректно обрабатывает клики на родительский
<label>, предотвращая двойное срабатывание.
📄 Лицензия
MIT License
Оригинальный Switchery создан Alexander Petkov.
ES6 версия без зависимостей.
🤝 Благодарности
- Alexander Petkov — автор оригинального Switchery
- Veselin Todorov — вклад в оригинальный проект