Элементы

Контекстное меню

Меню действий по правой кнопке мыши или Shift+F10 на области. Разметка и поведение — от выпадающего меню.

context-menu с версии 0.1.0 со скриптом

Примеры

Плитка участника

Игорь Соколов Правая кнопка мыши или Shift+F10

<div class="ctxarea" id="cm-tile" tabindex="0" data-ui-context="#cm-tile-menu" aria-label="Участник Игорь Соколов, контекстное меню на Shift+F10">
  Игорь Соколов
  <span class="ctxarea__hint">Правая кнопка мыши или Shift+F10</span>
</div>
<div class="menu" id="cm-tile-menu" role="menu" aria-label="Действия с участником" hidden>
  <button class="menu__item" type="button" role="menuitem">Закрепить</button>
  <button class="menu__item" type="button" role="menuitem">Отправить сообщение</button>
  <button class="menu__item" type="button" role="menuitemcheckbox" aria-checked="false">Заглушить</button>
  <hr class="menu__sep" role="separator">
  <button class="menu__item menu__item--danger" type="button" role="menuitem">Удалить из встречи</button>
</div>

Карточка статьи

Как мы дежурим: постмортем за квартал Правая кнопка мыши или Shift+F10

<div class="ctxarea" id="cm-post" tabindex="0" data-ui-context="#cm-post-menu" aria-label="Статья «Как мы дежурим», контекстное меню на Shift+F10">
  Как мы дежурим: постмортем за квартал
  <span class="ctxarea__hint">Правая кнопка мыши или Shift+F10</span>
</div>
<div class="menu" id="cm-post-menu" role="menu" aria-label="Действия со статьёй" hidden>
  <a class="menu__item" role="menuitem" href="#">Открыть</a>
  <button class="menu__item" type="button" role="menuitem">Копировать ссылку</button>
  <button class="menu__item" type="button" role="menuitem" aria-disabled="true">Опубликовать</button>
</div>

Установка

bukatchuk-ui add context-menu

Вместе с компонентом установятся: tokens, fonts, base, core, button, dropdown-menu.

Файлы

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

Клавиши

Клавиша	Действие
`Shift+F10 / Menu`	открыть меню на области с фокусом
`ArrowDown / ArrowUp`	следующий и предыдущий пункт
`Home / End`	первый и последний пункт
`Enter / Space`	выбрать пункт
`Esc`	закрыть, фокус на область

Макрос для Jinja

{#- Область с контекстным меню. Содержимое области — caller(); пункты меню — items (готовая разметка .menu__item).
    Требует компонент dropdown-menu. -#}
{% macro context_area(id, label, items) -%}
<div class="ctxarea" id="{{ id }}" tabindex="0" data-ui-context="#{{ id }}-menu" aria-label="{{ label }}">{{ caller() }}</div>
<div class="menu" id="{{ id }}-menu" role="menu" aria-label="{{ label }}" hidden>{{ items|safe }}</div>
{%- endmacro %}