Material Design Lite. Переключатели

Существует три вида переключателей: Checkbox, Radio button, Icon toggle, Switch.

Checkbox (Флажок)

Флажок (Checkbox) основан на стандартном элементе HTML <input type="checkbox">.

Может иметь состояние, когда флажок отмечен или нет, а также состояние недоступности.

Классы для компонента.

• mdl-checkbox - Обязательный. Используется в label
• mdl-js-checkbox - Обязательный. Задаёт поведение компонента. Используется в label
• mdl-checkbox__input - Обязательный. Используется в input.
• mdl-checkbox__label - Обязательный. Используется в span (надпись)
• mdl-js-ripple-effect - Необязательный. Добавляет эффект ряби. Используется в label

Создайте элемент label с атрибутом for, который должен иметь значение идентификатора флажка. Внутри label разместите элемент input с типом checkbox и присвойте ему идентификатор.

Также внутри label после checkbox добавьте элемент span, содержащий текст для флажка.

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
  <span>Текст для флажка</span>
</label>

Теперь добавляйте MDL-классы для всех созданных элементов и компонент готов к работе.

<label for="checkbox1" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="checkbox1" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Текст для флажка</span>
</label>

Radio button

Стандартные переключатели, которые зависят друг от друга.

Переключатели основаны на HTML-элементе <input type="radio">. Должны всегда быть в группе из двух и более переключателей, и только один может быть выбранным.

Классы.

• mdl-radio - Обязательный. Используется в label
• mdl-js-radio - Обязательный. Задает поведение. Используется в label
• mdl-radio__button - Обязательный. Используется в input
• mdl-radio__label - Обязательный. Используется в span.

• mdl-js-ripple-effect - Необязательный. Эффект ряби. Задаётся в label

Добавьте элемент label с атрибутом for, который должен иметь значение идентификатора переключателя. Внутри label разместите элемент input с типом radio и присвойте ему идентификатор. А также атрибут name для объединения в группу. Атрибут value позволяет установить нужное состояние - on или off.

Также внутри label после input добавьте элемент span для текста к переключателю.

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
  <span>Вкл.</span>
</label>

Осталось добавить MDL-классы и компонент готов к использованию.

<label for="radio1" class="mdl-radio mdl-js-radio">
  <input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
  <span class="mdl-radio__label">Вкл.</span>
</label>

Повторите операции несколько раз по количеству переключателей. При этом поменять идентификатор у input и соответсвенно у label в атрибуте for. Атрибут name должен быть у всех одинаковым. Только у одного элемента установить значение on в атрибуте value.

Группа компонентов готова к использованию.

ICON TOGGLE

Разновидность флажков, состоящая из значка. Такой вариант может использоваться на панели инструментов, когда надо установить различные режимы, например, включить жирный шрифт и т.д.

Смотрите документацию.

<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

Switch

Ещё один вид переключателей на основе <input type="checkbox">

Классы.

• mdl-switch - Обязательный. Используется в label
• mdl-js-switch - Обязательный. Задает поведение. Используется в label
• mdl-switch__input - Обязательный. Используется в input
• mdl-switch__label - Обязательный. Используется в span
• mdl-js-ripple-effect - Необязательный. Эффект ряби. Используется в label.

Создайте элемент label и присвойте атрибуту for значение идентификатора элемента input.

Внутри label разместите input с типом checkbox и уникальным идентификатором.

Также добавьте элемент span для текста.

Добавьте MDL-классы.

<label for="switch1" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch1" class="mdl-switch__input">
  <span class="mdl-switch__label">Sound off/on</span>
</label>

Компонент готов к использованию.

Посмотреть примеры с переключателями

Реклама