bukatchuk ui

Элементы

Группа радиокнопок

Выбор одного варианта: круглые или квадратные индикаторы, в столбец или в ряд, вариант карточками для тарифов. Работает без скрипта.

radio-group с версии 0.1.0

Примеры

Кто может войти
Кто может войти 
<form action="#" method="post">
  <fieldset class="radios">
    <legend class="radios__legend">Кто может войти</legend>
    <div class="radios__items">
      <label class="radio" for="rg-access-1">
        <input class="radio__input" type="radio" id="rg-access-1" name="access" value="link" checked>
        <span class="radio__text"><span class="radio__label">Все, у кого есть ссылка</span></span>
      </label>
      <label class="radio" for="rg-access-2">
        <input class="radio__input" type="radio" id="rg-access-2" name="access" value="domain">
        <span class="radio__text"><span class="radio__label">Только сотрудники компании</span><span class="radio__desc">Вход по рабочему e-mail.</span></span>
      </label>
      <label class="radio" for="rg-access-3">
        <input class="radio__input" type="radio" id="rg-access-3" name="access" value="invite">
        <span class="radio__text"><span class="radio__label">Только по приглашению</span></span>
      </label>
    </div>
  </fieldset>
</form>
Квадратные индикаторы в ряд
Качество видео 
<fieldset class="radios radios--square radios--row">
  <legend class="radios__legend">Качество видео</legend>
  <div class="radios__items">
    <label class="radio" for="rg-q-1"><input class="radio__input" type="radio" id="rg-q-1" name="quality" value="360"><span class="radio__text"><span class="radio__label">360p</span></span></label>
    <label class="radio" for="rg-q-2"><input class="radio__input" type="radio" id="rg-q-2" name="quality" value="720" checked><span class="radio__text"><span class="radio__label">720p</span></span></label>
    <label class="radio" for="rg-q-3"><input class="radio__input" type="radio" id="rg-q-3" name="quality" value="1080"><span class="radio__text"><span class="radio__label">1080p</span></span></label>
    <label class="radio" for="rg-q-4"><input class="radio__input" type="radio" id="rg-q-4" name="quality" value="4k" disabled><span class="radio__text"><span class="radio__label">4K</span></span></label>
  </div>
</fieldset>
Выбор тарифа карточками
Тариф 
<fieldset class="radios radios--cards">
  <legend class="radios__legend">Тариф</legend>
  <div class="radios__items">
    <label class="radio-card" for="rg-plan-1">
      <input class="radio-card__input" type="radio" id="rg-plan-1" name="plan" value="free">
      <span class="radio-card__body"><span class="radio-card__title">Бесплатный</span><span class="radio-card__price">0 ₽</span><span class="radio-card__desc">До 5 участников, встречи до 40 минут.</span></span>
    </label>
    <label class="radio-card" for="rg-plan-2">
      <input class="radio-card__input" type="radio" id="rg-plan-2" name="plan" value="team" checked>
      <span class="radio-card__body"><span class="radio-card__title">Команда</span><span class="radio-card__price">490 ₽/мес</span><span class="radio-card__desc">До 50 участников, запись, без ограничения по времени.</span></span>
    </label>
    <label class="radio-card" for="rg-plan-3">
      <input class="radio-card__input" type="radio" id="rg-plan-3" name="plan" value="company">
      <span class="radio-card__body"><span class="radio-card__title">Компания</span><span class="radio-card__price">По запросу</span><span class="radio-card__desc">До 500 участников, вход через корпоративный каталог.</span></span>
    </label>
  </div>
</fieldset>

Установка

bukatchuk-ui add radio-group

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

Файлы

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

Варианты

КлассНазначение
radios--square
radios--row
radios--cards

Клавиши

КлавишаДействие
Tabвойти в группу и выйти из неё
↑ ←предыдущий вариант
↓ →следующий вариант
Spaceвыбрать вариант, если он ещё не выбран

Макрос для Jinja

{#- Группа радиокнопок. options — список (value, label[, desc]) или словарей {value, label, desc, disabled};
    selected — выбранное значение; style: round | square | cards (для cards у варианта можно задать price);
    row=True — варианты в ряд. -#}
{% macro radio_group(name, legend, options, selected=None, shape='round', row=False, required=False, id=None) -%}
{%- set gid = id or ('rg-' ~ name) -%}
<fieldset class="radios{% if shape == 'square' %} radios--square{% elif shape == 'cards' %} radios--cards{% endif %}{% if row %} radios--row{% endif %}" id="{{ gid }}">
  <legend class="radios__legend">{{ legend }}</legend>
  <div class="radios__items">
  {%- for o in options %}
    {%- set value = o.value if o is mapping else o[0] -%}
    {%- set label = o.label if o is mapping else o[1] -%}
    {%- set desc = o.desc if o is mapping else (o[2] if o|length > 2 else None) -%}
    {%- set price = o.price if o is mapping else None -%}
    {%- set off = o.disabled if o is mapping else False -%}
    {%- set oid = gid ~ '-' ~ loop.index %}
    {%- if shape == 'cards' %}
    <label class="radio-card" for="{{ oid }}">
      <input class="radio-card__input" type="radio" id="{{ oid }}" name="{{ name }}" value="{{ value }}"{% if value == selected %} checked{% endif %}{% if off %} disabled{% endif %}{% if required and loop.first %} required{% endif %}>
      <span class="radio-card__body">
        <span class="radio-card__title">{{ label }}</span>
        {%- if price %}<span class="radio-card__price">{{ price }}</span>{% endif %}
        {%- if desc %}<span class="radio-card__desc">{{ desc }}</span>{% endif %}
      </span>
    </label>
    {%- else %}
    <label class="radio" for="{{ oid }}">
      <input class="radio__input" type="radio" id="{{ oid }}" name="{{ name }}" value="{{ value }}"{% if value == selected %} checked{% endif %}{% if off %} disabled{% endif %}{% if required and loop.first %} required{% endif %}>
      <span class="radio__text">
        <span class="radio__label">{{ label }}</span>
        {%- if desc %}<span class="radio__desc">{{ desc }}</span>{% endif %}
      </span>
    </label>
    {%- endif %}
  {%- endfor %}
  </div>
</fieldset>
{%- endmacro %}