bukatchuk ui

Элементы

Строка меню

Строка меню приложения: меню с пунктами, переключателями и подсказками клавиш.

menubar с версии 0.1.0 со скриптом

Примеры

Строка меню приложения
<div class="menubar" role="menubar" aria-label="Меню приложения" data-ui-menubar>
  <div class="menubar__menu" role="none">
    <button class="menubar__trigger" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" aria-controls="mb-ex-file" tabindex="0">Файл</button>
    <div class="menubar__panel" id="mb-ex-file" role="menu" aria-label="Файл">
      <button class="menubar__item" type="button" role="menuitem" tabindex="-1">Новая встреча <kbd class="menubar__kbd">⌘N</kbd></button>
      <button class="menubar__item" type="button" role="menuitem" tabindex="-1">Запланировать… <kbd class="menubar__kbd">⌘L</kbd></button>
      <div class="menubar__sep" role="separator"></div>
      <a class="menubar__item" href="/recordings/" role="menuitem" tabindex="-1">Открыть записи</a>
      <button class="menubar__item" type="button" role="menuitem" aria-disabled="true" tabindex="-1">Экспорт отчёта</button>
    </div>
  </div>
  <div class="menubar__menu" role="none">
    <button class="menubar__trigger" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" aria-controls="mb-ex-view" tabindex="-1">Вид</button>
    <div class="menubar__panel" id="mb-ex-view" role="menu" aria-label="Вид">
      <button class="menubar__item" type="button" role="menuitemcheckbox" aria-checked="true" tabindex="-1">Панель участников</button>
      <button class="menubar__item" type="button" role="menuitemcheckbox" aria-checked="false" tabindex="-1">Субтитры</button>
      <div class="menubar__sep" role="separator"></div>
      <div role="group" aria-label="Раскладка">
        <button class="menubar__item" type="button" role="menuitemradio" aria-checked="true" tabindex="-1">Сетка</button>
        <button class="menubar__item" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">Докладчик</button>
      </div>
    </div>
  </div>
  <div class="menubar__menu" role="none">
    <button class="menubar__trigger" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" aria-controls="mb-ex-help" tabindex="-1">Справка</button>
    <div class="menubar__panel" id="mb-ex-help" role="menu" aria-label="Справка">
      <a class="menubar__item" href="/docs/" role="menuitem" tabindex="-1">Документация</a>
      <a class="menubar__item" href="/status/" role="menuitem" tabindex="-1">Состояние сервиса</a>
    </div>
  </div>
</div>

Установка

bukatchuk-ui add menubar

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

Файлы

ФайлНазначение
menubar.cssстили
menubar.jsскрипт
example.htmlобразец разметки, в проект не копируется

Клавиши

КлавишаДействие
←, →перейти к соседнему меню (если одно открыто — открыть соседнее)
↓, Enter, Пробелна названии меню — открыть и перейти к первому пункту
↑на названии меню — открыть и перейти к последнему пункту
↓, ↑ в менюследующий и предыдущий пункт по кругу
Home, Endпервый и последний пункт
букваперейти к пункту, название которого начинается с неё
Enter, Пробел на пунктевыбрать пункт, закрыть меню и вернуть фокус на его название
Escзакрыть меню, фокус возвращается на название
Tabзакрыть меню и уйти из строки