DropdownВыпадающее меню

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

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

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

import 'mdui/components/dropdown.js';

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

import type { Dropdown } from 'mdui/components/dropdown.js';

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

open dropdown

Item 1

Item 2

<mdui-dropdown>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

При использовании меню внутри выпадающего меню по умолчанию оно автоматически закрывается при клике на пункт меню. Добавьте атрибут stay-open-on-click, чтобы меню оставалось открытым при клике на пункт меню.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Исходный код

Задержка открытия/закрытия

При установке trigger="hover" можно задать задержку открытия и закрытия с помощью атрибутов open-delay и close-delay.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`open`	`open`	`boolean`	`false`
Определяет, открыто ли выпадающее меню.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключено ли выпадающее меню.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Способ открытия выпадающего меню, можно указать несколько значений через пробел. Возможные значения: `click` — открытие по клику `hover` — открытие при наведении мыши `focus` — открытие при фокусе `contextmenu` — открытие по щелчку правой кнопкой мыши или долгому нажатию на сенсорных устройствах `manual` — можно открывать и закрывать только программно, другие способы не указываются
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Расположение содержимого выпадающего меню. Возможные значения: `auto` — автоматическое определение положения `top-start` — сверху, выравнивание по левому краю `top` — сверху, по центру `top-end` — сверху, выравнивание по правому краю `bottom-start` — снизу, выравнивание по левому краю `bottom` — снизу, по центру `bottom-end` — снизу, выравнивание по правому краю `left-start` — слева, выравнивание по верхнему краю `left` — слева, по центру `left-end` — слева, выравнивание по нижнему краю `right-start` — справа, выравнивание по верхнему краю `right` — справа, по центру `right-end` — справа, выравнивание по нижнему краю
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Определяет, оставаться ли открытым после клика по `<mdui-menu-item>`.
`open-delay`	`openDelay`	`number`	`150`
Задержка открытия выпадающего меню при наведении мыши, в миллисекундах.
`close-delay`	`closeDelay`	`number`	`150`
Задержка закрытия выпадающего меню при наведении мыши, в миллисекундах.
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Определяет, открывать ли выпадающее меню в позиции указателя; часто используется для контекстного меню.

События

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

Slots

Название
(по умолчанию)
Содержимое выпадающего меню.
`trigger`
Элемент, открывающий выпадающее меню, например `<mdui-button>`.

CSS Parts

Название
`trigger`
Контейнер элемента, открывающего выпадающее меню (слот `trigger`).
`panel`
Контейнер содержимого выпадающего меню.

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

Название
`--z-index`
Значение CSS `z-index` компонента.

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

Divider Разделитель

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

Fab Плавающая кнопка действия

DropdownВыпадающее меню

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

Примеры

Отключенное состояние

Положение открытия

Способ вызова

Открытие в позиции курсора

Сохранение меню открытым при клике

Задержка открытия/закрытия

API

Свойства

События

Slots

CSS Parts

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