MenuМеню

Компонент меню предоставляет набор вертикально расположенных опций. Меню отображается, когда пользователь взаимодействует с кнопкой или другим элементом управления.

Если вам нужно реализовать выпадающее меню, вы можете использовать компонент <mdui-dropdown>.

Использование

При необходимости импортируйте компоненты:

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

При необходимости импортируйте типы TypeScript:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Пример использования:

Item 1

Item 2

<mdui-menu>
  <mdui-menu-item>Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

Установите атрибут selects компонента <mdui-menu> в значение single, чтобы включить режим одиночного выбора. В этом случае значением value компонента <mdui-menu> будет значение value выбранного <mdui-menu-item>.

Item 1

Item 2

<mdui-menu selects="single" value="item-2">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-menu>

Исходный код

Поддержка множественного выбора

Установите атрибут selects компонента <mdui-menu> в значение multiple, чтобы включить режим множественного выбора. В этом случае значением value компонента <mdui-menu> будет массив значений value выбранных <mdui-menu-item>.

Обратите внимание: в режиме множественного выбора value компонента <mdui-menu> является массивом, который можно читать и устанавливать только через JavaScript-свойство.

Item 1

Item 2

Item 3

<mdui-menu selects="multiple" class="example-multiple">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Item 3</mdui-menu-item>
</mdui-menu>

<script>
  // Устанавливаем item-1 и item-2 выбранными по умолчанию
  const menu = document.querySelector(".example-multiple");
  menu.value = ["item-1", "item-2"];
</script>

Исходный код

Иконка

С помощью атрибутов icon и end-icon у компонента <mdui-menu-item> можно добавить иконки Material Icons слева и справа от пункта меню. С помощью атрибута end-text можно добавить текст справа. Также можно использовать слоты icon, end-icon и end-text для добавления элементов.

Если нужно оставить место для иконки слева для выравнивания с другими пунктами меню, установите атрибут icon в пустую строку.

Item 1

Item 2

Ctrl+X

Item 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Item 1</mdui-menu-item>
  <mdui-menu-item>
    Item 2
    <mdui-icon slot="icon" name="visibility"></mdui-icon>
    <mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
    <span slot="end-text">Ctrl+X</span>
  </mdui-menu-item>
  <mdui-menu-item icon="">Item 3</mdui-menu-item>
</mdui-menu>

Исходный код

В режимах одиночного или множественного выбора можно задать иконку выбранного состояния через атрибут selected-icon или слот selected-icon.

Item 1

Item 2

<mdui-menu selects="multiple">
  <mdui-menu-item value="item-1" selected-icon="cloud_done">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">
    <mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
    Item 2
  </mdui-menu-item>
</mdui-menu>

Исходный код

Ссылка

Установите атрибут href у компонента <mdui-menu-item>, чтобы превратить пункт меню в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

Item 1

Item 2

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

Исходный код

Подменю

В компоненте <mdui-menu-item> можно использовать слот submenu для указания элементов подменю.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu>
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Исходный код

В компоненте <mdui-menu> можно задать способ вызова подменю через атрибут submenu-trigger.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Исходный код

Когда атрибут submenu-trigger установлен в значение hover, можно задать задержку открытия и закрытия подменю через атрибуты submenu-open-delay и submenu-close-delay у компонента <mdui-menu>.

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

Исходный код

Пользовательское содержимое

В компоненте <mdui-menu-item> вы можете использовать слот custom для полной настройки содержимого пункта меню.

ABS

Возвращает абсолютное значение числа

ACOS

Возвращает арккосинус числа (в радианах)

ACOSH

Возвращает гиперболический арккосинус числа

<style>
  .custom-item {
    padding: 4px 12px;
  }

  .custom-item .secondary {
    display: none;
    color: #888;
    font-size: 13px;
  }

  .custom-item:hover .secondary {
    display: block
  }
</style>

<mdui-menu>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ABS</div>
      <div class="secondary">Возвращает абсолютное значение числа</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">Возвращает арккосинус числа (в радианах)</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">Возвращает гиперболический арккосинус числа</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

Исходный код

Атрибут	Свойство	Тип	По умолчанию
`value`	`value`	`string`	-
Значение пункта меню.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли пункт меню.
`icon`	`icon`	`string`	-
Имя иконки Material Icons слева. Можно задать через `slot="icon"`. Если слева не нужна иконка, но нужно зарезервировать место, можно передать пустую строку в качестве заполнителя.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons справа. Можно задать через `slot="end-icon"`.
`end-text`	`endText`	`string`	-
Текст справа. Можно задать через `slot="end-text"`.
`selected-icon`	`selectedIcon`	`string`	-
Имя иконки Material Icons для выбранного состояния. Можно задать через `slot="selected-icon"`.
`submenu-open`	`submenuOpen`	`boolean`	`false`
Определяет, открыто ли подменю.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`submenu-open`
Срабатывает в начале открытия подменю. Можно отменить открытие, вызвав `event.preventDefault()`.
`submenu-opened`
Срабатывает после завершения анимации открытия подменю.
`submenu-close`
Срабатывает в начале закрытия подменю. Можно отменить закрытие, вызвав `event.preventDefault()`.
`submenu-closed`
Срабатывает после завершения анимации закрытия подменю.

Название
(по умолчанию)
Текст пункта меню.
`icon`
Иконка слева от пункта меню.
`end-icon`
Иконка справа от пункта меню.
`end-text`
Текст справа от пункта меню.
`selected-icon`
Иконка выбранного состояния.
`submenu`
Подменю.
`custom`
Любое пользовательское содержимое.

Название
`container`
Контейнер пункта меню.
`icon`
Иконка слева.
`label`
Текстовое содержимое.
`end-icon`
Иконка справа.
`end-text`
Текст справа.
`selected-icon`
Иконка выбранного состояния.
`submenu`
Элемент подменю.

Атрибут	Свойство	Тип	По умолчанию
`selects`	`selects`	`'single' \| 'multiple'`	-
Режим выбора пунктов меню. По умолчанию выбор отключён. Возможные значения: `single` — одиночный выбор `multiple` — множественный выбор
`value`	`value`	`string \| string[]`	-
Значение текущего выбранного `<mdui-menu-item>`. Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при `selects="single"`. JavaScript-свойство этого свойства является строкой при `selects="single"` и массивом строк при `selects="multiple"`. Поэтому при `selects="multiple"` изменить это значение можно только через JavaScript-свойство.
`dense`	`dense`	`boolean`	`false`
Определяет, использовать ли компактный режим для пунктов меню.
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
Способ открытия подменю, можно указать несколько значений через пробел. Возможные значения: `click` — открытие по клику на пункт меню `hover` — открытие при наведении мыши на пункт меню `focus` — открытие при фокусе на пункте меню `manual` — можно открывать и закрывать только программно, другие способы не указываются
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
Задержка открытия подменю при наведении мыши, в миллисекундах.
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
Задержка закрытия подменю при наведении мыши, в миллисекундах.

Название	Параметры	Возвращаемое значение
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент.
`blur`		`void`
Убирает фокус с текущего элемента.

Название
`change`
Срабатывает при изменении выбора пунктов меню.

Название
(по умолчанию)
Элементы подменю (`<mdui-menu-item>`), разделители (`<mdui-divider>`) и т.д.

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

List Список

Следующая глава

NavigationBar Панель навигации

MenuМеню

Использование

Примеры

Компактная компоновка

Отключенные пункты меню

Поддержка одиночного выбора

Поддержка множественного выбора

Иконка

Ссылка

Подменю

Пользовательское содержимое

`mdui-menu-item` API

Свойства

Методы

События

Slots

CSS Parts

`mdui-menu` API

Свойства

Методы

События

Slots

Пользовательские CSS-свойства