PHPackages besnovatyj/yii2-cms-switcher-column - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. besnovatyj/yii2-cms-switcher-column ActiveYii2-extension[Utility & Helpers](/categories/utility) besnovatyj/yii2-cms-switcher-column =================================== Виджет переключателя статуса (column для GridView) для Yii2 CMS v1.0.0(1mo ago)091MITJavaScriptPHP >=8.4 Since Jul 6Pushed 1mo agoCompare [ Source](https://github.com/besnovatyj/yii2-cms-switcher-column)[ Packagist](https://packagist.org/packages/besnovatyj/yii2-cms-switcher-column)[ RSS](/packages/besnovatyj-yii2-cms-switcher-column/feed)WikiDiscussions master Synced 1w ago READMEChangelogDependencies (3)Versions (2)Used By (1) Switchery Modern ================ [](#switchery-modern) [![Версия](https://camo.githubusercontent.com/97f85f046265623c4b26076add9bcc55f9608152c20e78f07076369977c77d05/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d677265656e2e737667)](https://camo.githubusercontent.com/97f85f046265623c4b26076add9bcc55f9608152c20e78f07076369977c77d05/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d677265656e2e737667)[![Лицензия](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)[![Зависимости](https://camo.githubusercontent.com/3edc6c7e97c482b99ab44a8d2ccad58f6e887819e3026f5efc2ad20ca56fcfba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d6e6f6e652d627269676874677265656e2e737667)](https://camo.githubusercontent.com/3edc6c7e97c482b99ab44a8d2ccad58f6e887819e3026f5efc2ad20ca56fcfba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d6e6f6e652d627269676874677265656e2e737667) Современная ES6 версия библиотеки [Switchery](https://github.com/abpetkov/switchery) без внешних зависимостей. Превращает стандартные HTML чекбоксы в красивые iOS-style переключатели. [![Preview](https://camo.githubusercontent.com/fbc88fcdfc83320857a066c92bec004a6e500124c826dace12b017ba1077d560/68747470733a2f2f692e696d6775722e636f6d2f3050637554624f2e6a7067)](https://camo.githubusercontent.com/fbc88fcdfc83320857a066c92bec004a6e500124c826dace12b017ba1077d560/68747470733a2f2f692e696d6775722e636f6d2f3050637554624f2e6a7067) ✨ Особенности ------------- [](#-особенности) - 🚀 **Без зависимостей** — чистый ES6, никаких внешних библиотек - 📦 **Легковесный** — ~4KB минифицированный - ♿ **Доступность** — поддержка клавиатуры и ARIA-атрибуты - 📱 **Мобильные устройства** — оптимизировано для тач-интерфейсов - 🎨 **Кастомизация** — гибкая настройка цветов, размеров и анимаций - 🔄 **Совместимость** — полностью совместим с API оригинального Switchery - 🌐 **UMD модуль** — работает с CommonJS, AMD и как глобальный объект 📥 Установка ----------- [](#-установка) ### Вариант 1: Прямое подключение [](#вариант-1-прямое-подключение) ``` ``` ### Вариант 2: ES6 модуль [](#вариант-2-es6-модуль) ``` import Switchery from './switchery.js'; ``` ### Вариант 3: CommonJS [](#вариант-3-commonjs) ``` const Switchery = require('./switchery.js'); ``` 🚀 Быстрый старт --------------- [](#-быстрый-старт) ### HTML [](#html) ``` ``` ### JavaScript [](#javascript) ``` // Один элемент const elem = document.querySelector('.js-switch'); const switchery = new Switchery(elem); // Несколько элементов document.querySelectorAll('.js-switch').forEach(el => { new Switchery(el); }); ``` Готово! Чекбокс превратится в красивый переключатель 🎉 ⚙️ Настройки ------------ [](#️-настройки) При создании экземпляра можно передать объект с настройками: ``` const switchery = new Switchery(elem, { color: '#64bd63', // Цвет включенного состояния secondaryColor: '#dfdfdf', // Цвет выключенного состояния jackColor: '#fff', // Цвет ручки (вкл) jackSecondaryColor: null, // Цвет ручки (выкл), null = jackColor className: 'switchery', // CSS класс контейнера disabled: false, // Отключить переключатель disabledOpacity: 0.5, // Прозрачность в disabled состоянии speed: '0.4s', // Скорость анимации size: 'default' // Размер: 'small', 'default', 'large' }); ``` ### Таблица настроек [](#таблица-настроек) ПараметрТипПо умолчаниюОписание`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'`📐 Размеры --------- [](#-размеры) ``` // Маленький new Switchery(elem, { size: 'small' }); // Стандартный (по умолчанию) new Switchery(elem, { size: 'default' }); // Большой new Switchery(elem, { size: 'large' }); ``` РазмерШиринаВысотаsmall33px20pxdefault50px30pxlarge66px40px🎨 Кастомизация цветов --------------------- [](#-кастомизация-цветов) ### Базовые цвета [](#базовые-цвета) ``` // Синий переключатель new Switchery(elem, { color: '#3498db' }); // Красный переключатель new Switchery(elem, { color: '#e74c3c' }); // С кастомным цветом выключенного состояния new Switchery(elem, { color: '#9b59b6', secondaryColor: '#ecf0f1' }); ``` ### Цвета ручки [](#цвета-ручки) ``` // Кастомный цвет ручки new Switchery(elem, { color: '#7c8bc7', jackColor: '#9decff' }); // Разные цвета для вкл/выкл состояний new Switchery(elem, { color: '#faab43', secondaryColor: '#fc73d0', jackColor: '#fcf45e', jackSecondaryColor: '#c8ff77' }); ``` 🔌 API ----- [](#-api) ### Методы экземпляра [](#методы-экземпляра) #### `isChecked()` [](#ischecked) Проверяет, включен ли переключатель. ``` const switchery = new Switchery(elem); if (switchery.isChecked()) { console.log('Переключатель включен'); } ``` #### `isDisabled()` [](#isdisabled) Проверяет, отключен ли переключатель. ``` if (switchery.isDisabled()) { console.log('Переключатель недоступен'); } ``` #### `enable()` [](#enable) Включает отключенный переключатель. ``` switchery.enable(); ``` #### `disable()` [](#disable) Отключает переключатель (делает недоступным для взаимодействия). ``` switchery.disable(); ``` #### `destroy()` [](#destroy) Удаляет все обработчики событий. Используйте перед удалением элемента из DOM. ``` switchery.destroy(); ``` 📡 События --------- [](#-события) Переключатель работает с нативным событием `change` на оригинальном чекбоксе: ``` const checkbox = document.querySelector('.js-switch'); const switchery = new Switchery(checkbox); // Отслеживание изменений checkbox.addEventListener('change', function() { console.log('Новое состояние:', this.checked); }); ``` ### Пример: реакция на изменение [](#пример-реакция-на-изменение) ``` const checkbox = document.getElementById('notifications'); new Switchery(checkbox); checkbox.addEventListener('change', function() { if (this.checked) { enableNotifications(); } else { disableNotifications(); } }); ``` 💡 Примеры использования ----------------------- [](#-примеры-использования) ### Включенный по умолчанию [](#включенный-по-умолчанию) ``` ``` ### Отключенный переключатель [](#отключенный-переключатель) ``` new Switchery(elem, { disabled: true }); ``` ### Внутри label [](#внутри-label) Переключатель корректно работает внутри ``: ``` Включить уведомления ``` ### Множественные переключатели [](#множественные-переключатели) ``` // Получаем все чекбоксы const checkboxes = document.querySelectorAll('.js-switch'); // Создаём переключатели checkboxes.forEach(checkbox => { new Switchery(checkbox); }); ``` ### Предотвращение повторной инициализации [](#предотвращение-повторной-инициализации) ``` const checkboxes = document.querySelectorAll('.js-switch'); checkboxes.forEach(checkbox => { // Проверяем, не был ли уже инициализирован if (!checkbox.getAttribute('data-switchery')) { new Switchery(checkbox); } }); ``` ### Программное изменение состояния [](#программное-изменение-состояния) ``` const checkbox = document.querySelector('.js-switch'); const switchery = new Switchery(checkbox); // Изменяем состояние программно function turnOn() { checkbox.checked = true; // Триггерим событие change для обновления UI checkbox.dispatchEvent(new Event('change')); } function turnOff() { checkbox.checked = false; checkbox.dispatchEvent(new Event('change')); } function toggle() { checkbox.checked = !checkbox.checked; checkbox.dispatchEvent(new Event('change')); } ``` ### Динамическое создание [](#динамическое-создание) ``` function createSwitch(container, options = {}) { const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; container.appendChild(checkbox); return new Switchery(checkbox, options); } // Использование const container = document.getElementById('switches'); const sw1 = createSwitch(container, { color: '#e74c3c' }); const sw2 = createSwitch(container, { size: 'large' }); ``` ### Сохранение состояния в localStorage [](#сохранение-состояния-в-localstorage) ``` const checkbox = document.getElementById('dark-mode'); const switchery = new Switchery(checkbox); // Восстанавливаем сохранённое состояние const saved = localStorage.getItem('darkMode'); if (saved !== null) { checkbox.checked = saved === 'true'; checkbox.dispatchEvent(new Event('change')); } // Сохраняем при изменении checkbox.addEventListener('change', function() { localStorage.setItem('darkMode', this.checked); // Применяем тему document.body.classList.toggle('dark-theme', this.checked); }); ``` ♿ Доступность (Accessibility) ----------------------------- [](#-доступность-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 ------------------ [](#-кастомизация-css) ### Переопределение стилей [](#переопределение-стилей) ``` /* Кастомная тень для ручки */ .switchery > small { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } /* Кастомный размер */ .switchery-custom { width: 80px; height: 40px; border-radius: 25px; } .switchery-custom > small { width: 36px; height: 36px; top: 2px; } ``` ### Использование кастомного класса [](#использование-кастомного-класса) ``` new Switchery(elem, { className: 'switchery switchery-custom' }); ``` 📝 Миграция с оригинального Switchery ------------------------------------ [](#-миграция-с-оригинального-switchery) Switchery Modern полностью совместим с оригинальной библиотекой. Просто замените файлы: ``` - - + + ``` Весь существующий код будет работать без изменений. 🐛 Известные особенности ----------------------- [](#-известные-особенности) 1. **Размеры вычисляются после рендеринга** — если переключатель создаётся в скрытом контейнере, позиция ручки может быть некорректной. Решение: инициализируйте после показа контейнера или вызовите `dispatchEvent(new Event('change'))`. 2. **Внутри label** — переключатель корректно обрабатывает клики на родительский ``, предотвращая двойное срабатывание. 📄 Лицензия ---------- [](#-лицензия) MIT License Оригинальный Switchery создан [Alexander Petkov](https://github.com/abpetkov). ES6 версия без зависимостей. --- 🤝 Благодарности --------------- [](#-благодарности) - [Alexander Petkov](https://github.com/abpetkov) — автор оригинального Switchery - [Veselin Todorov](https://github.com/vesln) — вклад в оригинальный проект ### Health Score 41 — FairBetter than 87% of packages Maintenance90 Actively maintained with recent releases Popularity6 Limited adoption so far Community11 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 48d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4dab004c4cab25d241bbf453f63cb48e6226d00bd84f50315e735c257c4a1b40?d=identicon)[besnovatyj](/maintainers/besnovatyj) --- Top Contributors [![besnovatyj](https://avatars.githubusercontent.com/u/1440158?v=4)](https://github.com/besnovatyj "besnovatyj (3 commits)") --- Tags cmsyii2columngridviewswitcher-column ### Embed Badge ![Health badge](/badges/besnovatyj-yii2-cms-switcher-column/health.svg) ``` [![Health](https://phpackages.com/badges/besnovatyj-yii2-cms-switcher-column/health.svg)](https://phpackages.com/packages/besnovatyj-yii2-cms-switcher-column) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.7M3.4k](/packages/craftcms-cms)[skeeks/cms SkeekS CMS — control panel and tools based on php framework Yii2 13926.0k66](/packages/skeeks-cms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)