Элементы

Кнопка-переключатель

Кнопка с двумя состояниями (aria-pressed) и вариант на флажке, который отправляется с формой без скрипта.

toggle с версии 0.1.0 со скриптом

Примеры

Кнопки во время встречи

<div class="togglers">
  <button class="toggle" type="button" aria-pressed="true" data-ui-on="Микрофон включён" data-ui-off="Микрофон выключен">Микрофон включён</button>
  <button class="toggle" type="button" aria-pressed="false" data-ui-on="Камера включена" data-ui-off="Камера выключена">Камера выключена</button>
  <button class="toggle" type="button" aria-pressed="false">Поднять руку</button>
  <button class="toggle" type="button" aria-pressed="false" disabled>Запись</button>
</div>

Вариант-флажок для формы, работает без скрипта

<form action="#" method="post">
  <div class="togglers" role="group" aria-label="Дни проведения">
    <label class="toggle toggle--check toggle--sm"><input class="toggle__input" type="checkbox" name="days" value="mon" checked><span class="toggle__face">Пн</span></label>
    <label class="toggle toggle--check toggle--sm"><input class="toggle__input" type="checkbox" name="days" value="tue"><span class="toggle__face">Вт</span></label>
    <label class="toggle toggle--check toggle--sm"><input class="toggle__input" type="checkbox" name="days" value="wed" checked><span class="toggle__face">Ср</span></label>
    <label class="toggle toggle--check toggle--sm"><input class="toggle__input" type="checkbox" name="days" value="thu"><span class="toggle__face">Чт</span></label>
    <label class="toggle toggle--check toggle--sm"><input class="toggle__input" type="checkbox" name="days" value="fri"><span class="toggle__face">Пт</span></label>
  </div>
</form>

Установка

bukatchuk-ui add toggle

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

Файлы

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

Варианты

Класс	Назначение
`toggle--sm`
`toggle--check`

Клавиши

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

Макрос для Jinja

{#- Переключаемая кнопка. as_checkbox=True — вариант-флажок с name/value, уходит с формой без скрипта;
    иначе кнопка с aria-pressed, её переключает скрипт toggle. -#}
{% macro toggle(text, pressed=False, name=None, value='1', as_checkbox=False, small=False, disabled=False, on_text=None, off_text=None) -%}
{%- if as_checkbox -%}
<label class="toggle toggle--check{% if small %} toggle--sm{% endif %}"><input class="toggle__input" type="checkbox" name="{{ name }}" value="{{ value }}"{% if pressed %} checked{% endif %}{% if disabled %} disabled{% endif %}><span class="toggle__face">{{ text }}</span></label>
{%- else -%}
<button class="toggle{% if small %} toggle--sm{% endif %}" type="button" aria-pressed="{{ 'true' if pressed else 'false' }}"{% if on_text %} data-ui-on="{{ on_text }}"{% endif %}{% if off_text %} data-ui-off="{{ off_text }}"{% endif %}{% if disabled %} disabled{% endif %}>{{ text }}</button>
{%- endif -%}
{%- endmacro %}