Элементы

Выпадающий список

Свой список вместо системного: кнопка со стрелкой, раскрытый список в чёрной рамке с жёсткой тенью. Системный select скрыт и хранит значение.

Примеры

<div class="btns">
  <select class="select__native" data-ui-select aria-label="Сервис">
    <option value="">Все сервисы</option>
    <option>Платёжный шлюз</option>
    <option>Очередь заданий</option>
    <option>Кластер PostgreSQL</option>
    <option>Балансировщик нагрузки</option>
  </select>
  <select class="select__native" data-ui-select aria-label="Сортировка">
    <option value="date-desc">Дата: сначала новые</option>
    <option value="date-asc">Дата: сначала старые</option>
    <option value="severity">По критичности</option>
  </select>
</div>

<select class="select__native" data-ui-select aria-label="Окружение">
  <option>Промышленное окружение, московский ЦОД</option>
  <option>Предпромышленное окружение</option>
  <option>Стенд разработки</option>
</select>

Установка

bukatchuk-ui add select

Файлы

Клавиши

Вставка для Jekyll

{%- comment -%}
  Выпадающий список. Параметры: label (подпись для скринридера), id, name,
  options (список строк), selected (выбранная строка), all (текст пункта «все», пустое значение).
  Системный select остаётся в разметке; в свой вид его превращает select.js.
{%- endcomment -%}
<select class="select__native" data-ui-select aria-label="{{ include.label }}"{% if include.id %} id="{{ include.id }}"{% endif %}{% if include.name %} name="{{ include.name }}"{% endif %}>
  {%- if include.all %}
  <option value="">{{ include.all }}</option>
  {%- endif %}
  {%- for o in include.options %}
  <option{% if o == include.selected %} selected{% endif %}>{{ o }}</option>
  {%- endfor %}
</select>

Макрос для Jinja

{#- Выпадающий список. options — список строк или пар (значение, текст); selected — выбранное значение;
    all — текст пункта «все» с пустым значением. Системный select хранит значение, свой вид даёт select.js. -#}
{% macro select(label, options, name=None, id=None, selected=None, all=None) -%}
<select class="select__native" data-ui-select aria-label="{{ label }}"{% if id %} id="{{ id }}"{% endif %}{% if name %} name="{{ name }}"{% endif %}>
  {%- if all %}
  <option value="">{{ all }}</option>
  {%- endif %}
  {%- for o in options %}
  {%- set value = o[0] if o is not string else o %}
  {%- set text = o[1] if o is not string else o %}
  <option value="{{ value }}"{% if value == selected %} selected{% endif %}>{{ text }}</option>
  {%- endfor %}
</select>
{%- endmacro %}