Элементы

Переключатель

Переключатель «вкл/выкл» на флажке с ролью switch: подпись, описание, отключённое состояние. Работает без скрипта.

switch с версии 0.1.0

Примеры

Настройки комнаты

<form class="switches" action="#" method="post">
  <label class="switch" for="sw-mic">
    <input class="switch__input" type="checkbox" role="switch" id="sw-mic" name="mic_off" value="1" aria-describedby="sw-mic-d" checked>
    <span class="switch__text">
      <span class="switch__label">Микрофон выключен при входе</span>
      <span class="switch__desc" id="sw-mic-d">Участники включают звук сами, когда готовы говорить.</span>
    </span>
  </label>
  <label class="switch" for="sw-wait">
    <input class="switch__input" type="checkbox" role="switch" id="sw-wait" name="waiting_room" value="1" aria-describedby="sw-wait-d">
    <span class="switch__text">
      <span class="switch__label">Зал ожидания</span>
      <span class="switch__desc" id="sw-wait-d">Новых участников впускает организатор.</span>
    </span>
  </label>
</form>

Отключённое состояние

Запись встречи Доступна на тарифе «Команда». Чат встречи

<div class="switches">
  <label class="switch" for="sw-rec">
    <input class="switch__input" type="checkbox" role="switch" id="sw-rec" name="record" value="1" aria-describedby="sw-rec-d" disabled>
    <span class="switch__text">
      <span class="switch__label">Запись встречи</span>
      <span class="switch__desc" id="sw-rec-d">Доступна на тарифе «Команда».</span>
    </span>
  </label>
  <label class="switch" for="sw-chat">
    <input class="switch__input" type="checkbox" role="switch" id="sw-chat" name="chat" value="1" checked disabled>
    <span class="switch__text">
      <span class="switch__label">Чат встречи</span>
    </span>
  </label>
</div>

Установка

bukatchuk-ui add switch

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

Файл	Назначение
`switch.css`	стили
`example.html`	образец разметки, в проект не копируется
`switch.jinja.html`	вставка для Jinja

Клавиши

Клавиша	Действие
`Space`	включить или выключить

Макрос для Jinja

{#- Переключатель. checked/disabled — состояние; value уходит с формой, когда переключатель включён;
    desc — пояснение под подписью. -#}
{% macro switch(name, label, desc=None, checked=False, disabled=False, value='on', id=None) -%}
{%- set sid = id or ('sw-' ~ name) -%}
<label class="switch" for="{{ sid }}">
  <input class="switch__input" type="checkbox" role="switch" id="{{ sid }}" name="{{ name }}" value="{{ value }}"{% if desc %} aria-describedby="{{ sid }}-d"{% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
  <span class="switch__text">
    <span class="switch__label">{{ label }}</span>
    {%- if desc %}
    <span class="switch__desc" id="{{ sid }}-d">{{ desc }}</span>
    {%- endif %}
  </span>
</label>
{%- endmacro %}