Вступление #
Кастомизация чекбокса, можно использовать по умолчанию класс .js-custom-checkbox
.
Установка #
Пример разметки и инициализации кастомизированного чекбокса.
<input
class="js-custom-checkbox"
type="checkbox"
data-checkbox-options='{"content": "<p><b>default</b> чекбокс</p>"}'
>
<input
class="js-custom-checkbox"
type="checkbox"
data-checkbox-options='{"type": "switch", "content": "<p><b>switch</b> чекбокс</p>"}'
>
Конфигурация #
Настройки, которые указываются при помощи специальных data-атрибутов.
data-checkbox-options #
В значениях указываются параметры для гибкой настройки элемента.
<input
class="js-custom-checkbox"
type="checkbox"
data-checkbox-options='{
"type": "switch",
"content": "<p>Это кастомизированный чекбокс</p>"
}'
>
Название | Тип | Описание |
---|---|---|
type |
string |
Указывает тип кастомизированного чекбокса: switch или default . |
content |
string |
Добавляет доп.контент к кастомизированному чекбоксу. |
data-checkbox-class #
В значениях можно указать свои классы для кастомизации чекбокса.
<input
class="js-custom-checkbox"
type="checkbox"
data-checkbox-class='{
"label": "my-custom-label",
"field": "my-custom-field",
"replace": "my-custom-replace",
"content": "my-custom-content"
}'
>
где
Название | Тип | Описание |
---|---|---|
label |
string |
Класс родительской обёртки, по умолчанию checkbox-label . |
field |
string |
Класс чекбокс-поля, по умолчанию checkbox-field . |
replace |
string |
Класс замены чекбокс-поля, по умолчанию checkbox-replace . |
content |
string |
Класс обёртки контента, по умолчанию checkbox-content . |