Компонент Выпадающий список Dropdown
Выпадающий список содержащий меню навигации Dropdown (дропдаун). Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции при отображении раскрывающегося списка. Анимация и раскрывающийся список. Использование.
Создание
Создание выпадающего списка Dropdown
Добавьте к элементу блока, который должен выпадать, атрибут uk-dropdown
, расположив выпадающий список ниже вызываемого.
<button type="button">кнопка</button>
<div uk-dropdown></div>
По сути своей, выпадающий список довольно похож на Выпадение : Drop. Любой контент, например ссылка, может переключать выпадающий список.
Вы можете раскрыть выпадающий список наведением курсора мыши или нажатием на переключатель.
Только для принудительного режима click
достаточно просто добавить опцию mode: click
к атрибуту.
Если вы хотите объеденить в группу переключатель и выпадающий список,
добавьте класс .uk-inline
из компонента Utility в элемент контейнера вокруг обоих.
<div class="uk-inline">
<button type="button"></button>
<div uk-dropdown="mode: click"></div>
</div>
- Никогда свобода слова не бывает столь драгоценной, как при случайном ударе молотком по пальцу.Никогда свобода слова не бывает столь драгоценной, как при случайном ударе молотком по пальцу.
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Наведи</button> <div uk-dropdown>Никогда свобода слова не бывает столь драгоценной, как при случайном ударе молотком по пальцу.</div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Нажми</button> <div uk-dropdown="mode: click">Никогда свобода слова не бывает столь драгоценной, как при случайном ударе молотком по пальцу.</div> </div>
Навигационное меню
Создаем выпадающее меню навигации
Выпадающий список Dropdown может содержать в себе навигацию
из компонента Навигация списком : Nav.
Добавьте к элементу <ul>
класс .uk-nav
и модификатор .uk-dropdown-nav
.
Чтобы определить заголовок в dropdown-меню, добавьте к элементу класс .uk-nav-header
, а для
подзаголовка используйте класс .uk-nav-subtitle
.
Разметка HTML:
<button type="button"></button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
...
</ul>
</div>
-
-
Заголовок
Подзаголовок
- Активный пункт
- Пункт меню
- Заголовок
- Пункт меню
- Ещё один пункт
- Нижний пункт меню
-
Заголовок
-
<button class="uk-button uk-button-primary" type="button">Навигация при клике</button> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header"> Заголовок <div class="uk-nav-subtitle">Подзаголовок</div> </li> <li class="uk-nav-divider"></li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Ещё один пункт</a></li> <li class="uk-nav-divider"></li> <li><a class="uk-nav-subtitle" href="#">Нижний пункт меню</a></li> </ul> </div>
Ширина и Grid
Сетка Grid в выпадающем списке Dropdown
Вы можете поместить сетку из компонента Грид в раскрывающийся список Dropdown,
который в свою очередь может содержать навигацию или любой другой контент.
Просто оберните содержимое элементом <div>
и добавьте атрибут uk-grid
.
Если сетка должна складываться автоматически, всякий раз,
когда раскрывающийся список больше не помещается в его контейнер, добавьте класс .uk-drop-grid
.
<div class="uk-width-large" uk-dropdown>
<div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>
Используйте один из классов UIkit компонента Ширина, чтобы настроить ширину выпадающего списка с навигационным меню или обычным контентом.
-
-
<div class="uk-panel-scrollable uk-width-xlarge@l"> <button class="uk-button uk-button-default" type="button">Нажми</button> <div class="uk-width-large" uk-dropdown="mode: click"> <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Самостоятельный пункт</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Ещё пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> </div> </div> </div>
Модификатор «Large»
Класс-модификатор .uk-dropdown-large
позволяет увеличить внутренний отступ.
Добавьте класс .uk-dropdown-large
для раскрывающегося контента с большим отступом.
<div class="uk-dropdown-large" uk-dropdown></div>
-
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Увеличенный отступ</button> <div class="uk-dropdown-large" uk-dropdown> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Название пункта</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название пункта</a></li> <li><a href="#">Ещё пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Название пункта</a></li> </ul> </div> </div>
Позиция
Позиция выпадающего списка
По умолчанию раскрывающийся список «Дропдаун» располагается под переключателем.
Чтобы изменить его положение, установите параметр pos
атрибута uk-dropdown
.
Первая часть значения относится к стороне на которой расположен раскрывающийся список,
а вторая часть определяет его выравнивание по отношению к переключателю.
<div uk-dropdown="pos: top-left"></div>
Добавьте один из следующих параметров в атрибут uk-dropdown
, чтобы настроить выравнивание списка «Дропдаун»:
Позиция | Описание |
---|---|
top-left |
Устанавливает выпадающий список в левом верхнем углу. |
top-center |
Выравнивает выпадающий список сверху по центру. |
top-right |
Устанавливает выпадающий список сверху справа. |
bottom-left |
Выравнивает выпадающий список по нижнему левому краю. |
bottom-center |
Выравнивает раскрывающийся список внизу по центру. |
bottom-right |
Выравнивает выпадающий список по нижнему правому краю. |
left-top |
Устанавливает раскрывающийся список слева вверху. |
left-center |
Выравнивает выпадающий список меню слева по центру. |
left-bottom |
Устанавливает выпадающий список слева по нижнему краю. |
right-top |
Выравнивает раскрывающийся список справа вверху. |
right-center |
Выравнивает раскрывающийся список справа по центру. |
right-bottom |
Выравнивает раскрывающийся список справа по нижнему краю. |
-
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Top Right</button> <div uk-dropdown="pos: top-right"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Ещё пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Bottom Center</button> <div uk-dropdown="pos: bottom-center"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Ещё пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Right Center</button> <div uk-dropdown="pos: right-center"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Ещё пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> </div>
Граница (Boundary)
По умолчанию раскрывающийся список Dropdown переворачивается автоматически,
когда он превышает край области просмотра или выходит за пределы любого другого родительского предка прокрутки.
Dropdown перевернет свое положение на другую сторону изменив своё направление, чтобы соответствовать размеру окна просмотра.
Если вы хотите перевернуть его в соответствии с границей контейнера, просто добавьте в атрибут uk-dropdown
параметр boundary: SELECTOR
используя селектор контейнера. Таким образом, вы можете определить любой родительский
элемент в качестве границы для выпадающего списка Dropdown.
<div class="my-class">
<button type="button">Вызываемая кнопка</button>
<div uk-dropdown="boundary: !.my-class">
…
</div>
</div>
-
- Активный пункт
- Пункт меню
- Заголовок
- Пункт меню
- Пункт меню
- Пункт меню
- Активное
- Элемент меню
- Заголовок
- Элемент меню
- Элемент меню
- Элемент меню
-
<div class="boundary uk-panel uk-placeholder uk-height-small"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт меню</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активное</a></li> <li><a href="#">Элемент меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Элемент меню</a></li> <li><a href="#">Элемент меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Элемент меню</a></li> </ul> </div> </div>
Shift и Flip
По умолчанию shift
и flip
имеют значение true
.
Чтобы отключить автоматическое смещение (shift) и переворачивание (flip),
добавьте параметр shift: false
или flip: false
к атрибуту uk-dropdown
.
<div uk-dropdown="shift: false; flip: false"></div>
-
- Активный пункт
- Пункт меню
- Заголовок
- Пункт меню
- Пункт меню
- Нижний пункт
- Активный пункт
- Пункт меню
- Заголовок
- Пункт меню
- Пункт меню
- Нижний пункт
- Заголовок
- Активный пункт
- Нижний пункт
- Заголовок
- Активный пункт
- Нижний пункт
- Заголовок
- Активный пункт
- Нижний пункт
- Заголовок
- Активный пункт
- Нижний пункт
-
<div class="boundary uk-panel uk-placeholder uk-height-medium"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary; shift: false; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> </div> <div class="boundary uk-panel uk-placeholder uk-height-small uk-background-muted"> <button class="uk-button uk-button-secondary uk-float-left" type="button">BR + flip: false</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> <button class="uk-button uk-button-secondary uk-float-right" type="button">BL + shift: false</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> </div> <div class="boundary uk-panel uk-placeholder uk-height-small uk-background-muted"> <button class="uk-button uk-button-secondary uk-float-left" type="button">BR + flip: true</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary; flip: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> <button class="uk-button uk-button-secondary uk-float-right" type="button">BL + shift: true</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> </div>
Auto Update
По умолчанию выпадение перемещается при прокрутке.
Чтобы отключить динамическое позиционирование, добавьте опцию auto-update: false
к атрибуту uk-dropdown
.
Выпадающий список «Дропдаун» будет позиционироваться только один раз при открытии.
<div uk-dropdown="auto-update: false"></div>
Target
По умолчанию раскрывающийся список Dropdown выровнен по переключателю.
Чтобы поместить раскрывающийся список в другой элемент, просто добавьте опцию target: SELECTOR
к атрибуту uk-dropdown
.
Чтобы изменить только сторону, на которой расположен раскрывающийся список, или изменить выравнивание по другому элементу,
используйте target-x: SELECTOR
или target-y: SELECTOR
.
<div class="my-class">
<button type="button">Переключатель</button>
<div uk-dropdown="target: !.my-class"></div>
</div>
-
- Активный
- Пункт меню
- Заголовок
- Пункт меню
- Пункт меню
- Нижний пункт
- Активный
- Пункт
- Заголовок
- Пункт меню
- Пункт меню
- Нижний пункт
-
<div class="target uk-panel uk-placeholder uk-height-medium"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; target: !.target"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; target: !.target"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Нижний пункт</a></li> </ul> </div> </div>
Inset
По умолчанию раскрывающийся список расположен за пределами переключателя.
Чтобы при открытии изменить положение внутрь (к себе), добавьте опцию inset: true
к атрибуту uk-dropdown
.
Этот параметр следует использовать только в том случае, если параметр target
также установлен таким образом,
что раскрывающийся список (меню) не перекрывает кнопку-переключатель.
<div uk-dropdown="target: .my-class; inset: true"></div>
-
- Заголовок
- Активный пункт
- Название пункта
- Бумбарашка
- Заголовок
- Активный пункт
- Название пункта
- Бумбарашка
-
<div class="target uk-panel uk-placeholder uk-height-large"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; target: !.target; inset: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Название пункта</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Бумбарашка</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; target: !.target; inset: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header">Заголовок</li> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Название пункта</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Бумбарашка</a></li> </ul> </div> </div>
Stretch
Чтобы растянуть раскрывающийся список, чтобы заполнить размер его ближайшего предка прокрутки,
добавьте параметр stretch: true
к атрибуту uk-dropdown
.
Чтобы растянуть только до одной оси, используйте stretch: x
или stretch: y
.
Если параметр boundary
установлен, раскрывающийся список растягивается до определенной границы.
<div uk-dropdown="stretch: true"></div>
-
-
<div class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Наведи</a> <div class="uk-navbar-dropdown" uk-dropdown="boundary: !.uk-navbar; stretch: x; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Название</a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название</a></li> <li><a href="#">Название</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пуговка</a></li> </ul> </div> </li> </ul> </div> </div>
Анимация
Анимация и её продолжительность
Примените одну или несколько анимаций к раскрывающемуся списку Dropdown,
добавив опцию animation: uk-animation-*
с каким-либо классом из компонента Анимация.
Вы также можете определить продолжительность анимации.
Просто добавьте опцию продолжительности duration
с необходимым значением в миллисекундах.
<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 950"></div>
-
- Активный элемент
- Элемент списка
- Заголовок списка
- Элемент списка
- Ещё один пункт
- Отдельный элемент
-
<button class="uk-button uk-button-default" type="button">Наведи-ка</button> <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 950"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный элемент</a></li> <li><a href="#">Элемент списка</a></li> <li class="uk-nav-header">Заголовок списка</li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Ещё один пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный элемент</a></li> </ul> </div>
Анимации Slide и Reveal
Компонент Dropdown имеет два дополнительных типа анимации,
которые не включает в себя компонент Animation.
Анимации slide-*
перемещают раскрывающийся список и его содержимое в выбранном направлении,
в то время как при анимации reveal-*
открываясь с выбранного направления содержимое раскрывающегося списка остается статичным.
Анимация | Описание |
---|---|
slide-top |
Сдвигает раксрывающееся содержимое сверху. |
slide-bottom |
Сдвигает раксрывающееся содержимое снизу. |
slide-left |
Сдвигает раксрывающееся содержимое слева. |
slide-right |
Сдвигает раксрывающееся содержимое справа. |
reveal-top |
Отображает контент выезжая сверху. |
reveal-bottom |
Отображает контент выезжая снизу. |
reveal-left |
Отображает контент выезжая слева. |
reveal-right |
Отображает контент выезжая справа. |
-
- Активненький
- Название
- Заголовок
- Название
- Название
- Название
- Активненький
- Название
- Заголовок
- Название
- Название
- Название
- Активненький
- Название
- Заголовок
- Название
- Название
- Название
- Активненький
- Название
- Заголовок
- Название
- Название
- Название
-
<div class="uk-margin" uk-margin> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Slide Top</button> <div uk-dropdown="animation: slide-top; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активненький</a></li> <li><a href="#">Название </a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название </a></li> <li><a href="#">Название </a></li> <li class="uk-nav-divider"></li> <li><a href="#">Название </a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Reveal Top</button> <div uk-dropdown="animation: reveal-top; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активненький</a></li> <li><a href="#">Название </a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название </a></li> <li><a href="#">Название </a></li> <li class="uk-nav-divider"></li> <li><a href="#">Название </a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Slide Left</button> <div uk-dropdown="animation: slide-left; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активненький</a></li> <li><a href="#">Название </a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название </a></li> <li><a href="#">Название </a></li> <li class="uk-nav-divider"></li> <li><a href="#">Название </a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Reveal Left</button> <div uk-dropdown="animation: reveal-left; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активненький</a></li> <li><a href="#">Название </a></li> <li class="uk-nav-header">Заголовок</li> <li><a href="#">Название </a></li> <li><a href="#">Название </a></li> <li class="uk-nav-divider"></li> <li><a href="#">Название </a></li> </ul> </div> </div> </div>
Смещение (Offset)
Чтобы определить пользовательское смещение между раскрывающимся контейнером и переключателем,
добавьте опцию offset
и значение для смещения, измеряемое в пикселях.
<div uk-dropdown="offset: 80"></div>
-
- Активный пункт
- Элемент меню
- Красота-то какая!
- Пункт списка
- Ещё один элемент
- Отдельный элемент
-
<button class="uk-button uk-button-default" type="button">Наведи-ка</button> <div uk-dropdown="offset: 80"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Элемент меню</a></li> <li class="uk-nav-header">Красота-то какая!</li> <li><a href="#">Пункт списка</a></li> <li><a href="#">Ещё один элемент</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный элемент</a></li> </ul> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.dropdown(element, options);
События
Следующие события будут инициированы для элементов компонента «Dropdown»:
Имя события | Описание |
---|---|
toggle |
Срабатывает до переключения элемента. |
beforeshow |
Срабатывает до отображения элемента. Можно предотвратить отображение, вызвав событие preventDefault() . |
show |
Срабатывает после отображения элемента. |
shown |
Запускается после завершения анимации отображённого элемента. |
beforehide |
Срабатывает до того, как элемент будет скрыт. Можно предотвратить отображение, вызвав событие preventDefault() . |
hide |
Запускается перед тем, как элемент скрыт. |
hidden |
Запускается после того, как элемент спрятан. |
stack |
Срабатывает, когда применяется класс drop-stack . |
Методы
Для компонента «Dropdown» доступны следующие методы:
Show
UIkit.dropdown(element).show();
Показывает Dropdown.
Hide
UIkit.dropdown(element).hide(delay);
Скрывает Dropdown.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
delay |
Boolean | true | Задержка скрытия раскрывающегося списка. |
Доступность
Компонент раскрывающегося списка Dropdown соответствует Menu Button Pattern WAI-ARIA и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
Переключатель имеет роль button
, состояние aria-expanded
и свойство aria-haspopup
.
Взаимодействие с клавиатурой
Доступ к компоненту Dropdown можно получить с клавиатуры, используя следующие кнопки:
- Клавиши enter или space открывают и закрывают раскрывающийся список dropdown.
- Клавиша esc закрывает раскрывающийся список dropdown, даже если фокус переместился на другой элемент.