Элементы

Выпадающее меню действий

Меню команд у кнопки: пункты, группы, разделители, флажки, выбор одного, опасные и отключённые пункты, подменю.

Примеры

<button class="btn btn--ghost" type="button" id="dm-act-btn" data-ui-menu="#dm-act" aria-haspopup="menu" aria-expanded="false">Действия</button>
<div class="menu" id="dm-act" role="menu" aria-labelledby="dm-act-btn" hidden>
  <button class="menu__item" type="button" role="menuitem">Копировать ссылку <span class="menu__kbd">C</span></button>
  <button class="menu__item" type="button" role="menuitem">Изменить время</button>
  <button class="menu__item" type="button" role="menuitem" aria-disabled="true">Скачать запись</button>
  <hr class="menu__sep" role="separator">
  <button class="menu__item menu__item--danger" type="button" role="menuitem">Отменить встречу</button>
</div>

<button class="btn btn--ghost" type="button" id="dm-view-btn" data-ui-menu="#dm-view" aria-haspopup="menu" aria-expanded="false">Вид</button>
<div class="menu" id="dm-view" role="menu" aria-labelledby="dm-view-btn" hidden>
  <div role="group" aria-labelledby="dm-view-g1">
    <div class="menu__label" id="dm-view-g1">Панели</div>
    <button class="menu__item" type="button" role="menuitemcheckbox" aria-checked="true" data-ui-keep>Чат</button>
    <button class="menu__item" type="button" role="menuitemcheckbox" aria-checked="false" data-ui-keep>Участники</button>
  </div>
  <hr class="menu__sep" role="separator">
  <div role="group" aria-labelledby="dm-view-g2">
    <div class="menu__label" id="dm-view-g2">Раскладка</div>
    <button class="menu__item" type="button" role="menuitemradio" aria-checked="true">Плитка</button>
    <button class="menu__item" type="button" role="menuitemradio" aria-checked="false">Докладчик</button>
  </div>
</div>

<button class="btn btn--ghost" type="button" id="dm-rec-btn" data-ui-menu="#dm-rec" aria-haspopup="menu" aria-expanded="false">Запись</button>
<div class="menu" id="dm-rec" role="menu" aria-labelledby="dm-rec-btn" hidden>
  <button class="menu__item" type="button" role="menuitem">Начать запись</button>
  <button class="menu__item" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" data-ui-submenu="#dm-rec-share">Поделиться</button>
  <button class="menu__item" type="button" role="menuitem">Удалить запись</button>
</div>
<div class="menu" id="dm-rec-share" role="menu" aria-label="Поделиться записью" hidden>
  <button class="menu__item" type="button" role="menuitem">Ссылка</button>
  <button class="menu__item" type="button" role="menuitem">E-mail</button>
</div>

Установка

bukatchuk-ui add dropdown-menu

Файлы

Клавиши

Вставка для Jekyll

{%- comment -%}
  Меню действий у кнопки. Параметры: id, label (текст кнопки), items (разметка пунктов: <button class="menu__item" role="menuitem">…).
{%- endcomment -%}
<button class="btn btn--ghost" type="button" id="{{ include.id }}-btn" data-ui-menu="#{{ include.id }}" aria-haspopup="menu" aria-expanded="false">{{ include.label }}</button>
<div class="menu" id="{{ include.id }}" role="menu" aria-labelledby="{{ include.id }}-btn" hidden>
  {{ include.items }}
</div>

Макрос для Jinja

{#- Меню действий у кнопки. entries — список словарей:
      {'label': 'Копировать'}                          обычный пункт
      {'label': 'Чат', 'check': True, 'checked': True} пункт с флажком
      {'label': 'Плитка', 'radio': True, 'checked': True} пункт выбора одного (подряд идущие образуют группу)
      {'label': 'Удалить', 'danger': True}             опасный пункт
      {'label': 'Скачать', 'disabled': True}           отключённый пункт
      {'label': 'Перейти', 'href': '/x'}               пункт-ссылка
      {'sep': True}                                     разделитель
      {'group': 'Панели'}                               подпись группы
    Подменю собираются разметкой вручную (см. example.html). -#}
{% macro dropdown_menu(id, label, entries, variant='ghost') -%}
<button class="btn btn--{{ variant }}" type="button" id="{{ id }}-btn" data-ui-menu="#{{ id }}" aria-haspopup="menu" aria-expanded="false">{{ label }}</button>
<div class="menu" id="{{ id }}" role="menu" aria-labelledby="{{ id }}-btn" hidden>
  {%- for e in entries %}
  {%- if e.sep %}
  <hr class="menu__sep" role="separator">
  {%- elif e.group %}
  <div class="menu__label" role="presentation">{{ e.group }}</div>
  {%- else %}
  {%- set role = 'menuitemcheckbox' if e.check else ('menuitemradio' if e.radio else 'menuitem') %}
  {%- set cls = 'menu__item' ~ (' menu__item--danger' if e.danger else '') %}
  {%- if e.href %}
  <a class="{{ cls }}" href="{{ e.href }}" role="{{ role }}">{{ e.label }}</a>
  {%- else %}
  <button class="{{ cls }}" type="button" role="{{ role }}"{% if e.check or e.radio %} aria-checked="{{ 'true' if e.checked else 'false' }}"{% endif %}{% if e.disabled %} aria-disabled="true"{% endif %}>{{ e.label }}</button>
  {%- endif %}
  {%- endif %}
  {%- endfor %}
</div>
{%- endmacro %}