bukatchuk ui

Элементы

Флажок

Строка с флажком и группа флажков в рамке с прокруткой.

checkbox с версии 0.1.0

Примеры

Один флажок
<label class="check"><input type="checkbox" name="remember" checked> Запомнить меня на этом устройстве</label>
Группа
Участники 
<fieldset class="checks">
  <legend class="field__label">Участники</legend>
  <label class="check"><input type="checkbox" name="guests" value="1" checked> Иванов Пётр <small>ivanov@example.ru</small></label>
  <label class="check"><input type="checkbox" name="guests" value="2"> Смирнова Анна <small>smirnova@example.ru</small></label>
  <label class="check"><input type="checkbox" name="guests" value="3"> Кузнецов Дмитрий <small>kuznetsov@example.ru</small></label>
</fieldset>

Установка

bukatchuk-ui add checkbox

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

Файлы

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

Варианты

КлассНазначение
checks

Макрос для Jinja

{#- Флажок со строкой подписи. note — серая приписка рядом. -#}
{% macro check(name, label, value='1', checked=False, note='') -%}
<label class="check"><input type="checkbox" name="{{ name }}" value="{{ value }}"{% if checked %} checked{% endif %}> {{ label }}{% if note %} <small>{{ note }}</small>{% endif %}</label>
{%- endmacro %}