JS Компонент Переключателя (ui.switcher)

Разрабатывая настройки для своего модуля ядра - я наткнулся на интересный компонент, который не документирован 1С-Битрикс. Компонент предназначен для отображения переключателя в стиле Битрикс24.

Подключение

\Bitrix\Main\UI\Extension::load('ui.switcher');

Параметры

Расширение находится в пространстве имен BX.UI.Switcher и является классом, который принимает такие параметры

let params = {
	attributeName: string, // Атрибут в котором может находится параметра для компонента (по умолчанию: data-switcher)
	node: HTMLElement, // Контейнер в который рендерить переключатель (не обязательный)
	id: string; // Идентификатор иконки (не обязательный)
	checked: boolean, // Состояние преключателя (по умолчанию: false)
	disabled: boolean, // Недоступен  (по умолчанию: false)
	inputName: string, // Атрибут name для инпута (по умолчанию: null)
	handlers: { // События
		toggled: callback,
		checked: callback,
		unchecked: callback,
		lock: callback,
		unlock: callback
	},
	size: string, // Размер переключателя (Доступные в размеры в BX.UI.SwitcherSize)
	color: string, // Цвет переключателя (Доступные цвета в  BX.UI.SwitcherColor)
}

Методы

// Инициализация всех переключателей по наличию класса "ui-switcher". Инициализируется в  1 параметром node
// Статический метод
BX.UI.Switcher.initByClassName();

// Получение всех Переключателей
// Статический метод
BX.UI.Switcher.getList();


// Получение переключателя по id
// Статический метод
BX.UI.Switcher.getById(id: string | number);

// Переключение
check(checked: boolean, fireEvents: boolean): void;

// Включить/выключить недоступность
disable(disabled: boolean, fireEvents: boolean): void

// Переключение 
toggle(): void

// Включить режим загрузки
setLoading(mode: boolean): void

// Получить состояние загрузки
isLoading(): boolean

// Если не передавать параметр node, то можно отрендерить переключатель таким способом, передав контейнер в который поместится перключатель
renderTo(targetNode: HTMLElement): HTMLElement

// Получение DOM переключателя
getNode(): HTMLElement;

// Получение атрибута name
getInputName(): string

Быстрое подключение переключателя

<div id="switcher"></div>
<script>
	new BX.UI.Switcher({
		node: BX('switcher'),
		inputName: 'switcher',
	});
</script>

Живые примеры