Элементы
Строка меню
Строка меню приложения: меню с пунктами, переключателями и подсказками клавиш.
Примеры
Строка меню приложения
<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
Файлы
| Файл | Назначение |
|---|---|
menubar.css | стили |
menubar.js | скрипт |
example.html | образец разметки, в проект не копируется |
Клавиши
| Клавиша | Действие |
|---|---|
| ←, → | перейти к соседнему меню (если одно открыто — открыть соседнее) |
| ↓, Enter, Пробел | на названии меню — открыть и перейти к первому пункту |
| ↑ | на названии меню — открыть и перейти к последнему пункту |
| ↓, ↑ в меню | следующий и предыдущий пункт по кругу |
| Home, End | первый и последний пункт |
| буква | перейти к пункту, название которого начинается с неё |
| Enter, Пробел на пункте | выбрать пункт, закрыть меню и вернуть фокус на его название |
| Esc | закрыть меню, фокус возвращается на название |
| Tab | закрыть меню и уйти из строки |