Элементы

Поле с приставкой

Поле с приставкой, суффиксом и кнопкой в одной рамке, например «https://» + адрес + «Копировать».

Примеры

<div class="field">
  <label class="field__label" for="ig-link">Ссылка для участников</label>
  <div class="input-group">
    <span class="input-group__addon" aria-hidden="true">https://</span>
    <input class="input-group__input" type="text" id="ig-link" name="link" value="meet.bukatchuk.ru/standup-4821" readonly>
    <button class="input-group__btn" type="button" data-ui-copy="#ig-link">Копировать</button>
  </div>
</div>

<div class="field">
  <label class="field__label" for="ig-room">Адрес комнаты</label>
  <div class="input-group">
    <span class="input-group__addon" aria-hidden="true">meet.bukatchuk.ru/</span>
    <input class="input-group__input" type="text" id="ig-room" name="room" value="design" autocomplete="off" aria-describedby="ig-room-h">
  </div>
  <p class="field__hint" id="ig-room-h">Латиница, цифры и дефис.</p>
</div>
<div class="field">
  <label class="field__label" for="ig-limit">Лимит записи</label>
  <div class="input-group">
    <input class="input-group__input" type="text" id="ig-limit" name="limit" inputmode="numeric" value="120">
    <span class="input-group__addon" aria-hidden="true">минут</span>
  </div>
</div>

Установка

bukatchuk-ui add input-group

Файлы

Клавиши

Макрос для Jinja

{#- Поле с приставкой/суффиксом/кнопкой в одной рамке. copy=True делает поле только для чтения
    и добавляет кнопку «Копировать» (нужен скрипт input-group); button — подпись своей кнопки submit. -#}
{% macro input_group(name, label, value='', prefix=None, suffix=None, copy=False, button=None, type='text', hint=None, readonly=False, id=None) -%}
{%- set iid = id or ('ig-' ~ name) -%}
<div class="field">
  <label class="field__label" for="{{ iid }}">{{ label }}</label>
  <div class="input-group">
    {%- if prefix %}<span class="input-group__addon" aria-hidden="true">{{ prefix }}</span>{% endif %}
    <input class="input-group__input" type="{{ type }}" id="{{ iid }}" name="{{ name }}" value="{{ value }}"{% if copy or readonly %} readonly{% endif %}{% if hint %} aria-describedby="{{ iid }}-h"{% endif %}>
    {%- if suffix %}<span class="input-group__addon" aria-hidden="true">{{ suffix }}</span>{% endif %}
    {%- if copy %}
    <button class="input-group__btn" type="button" data-ui-copy="#{{ iid }}">Копировать</button>
    {%- elif button %}
    <button class="input-group__btn" type="submit">{{ button }}</button>
    {%- endif %}
  </div>
  {%- if hint %}
  <p class="field__hint" id="{{ iid }}-h">{{ hint }}</p>
  {%- endif %}
</div>
{%- endmacro %}