Компонент Выпадающий список : Dropdown
Выпадающий список содержащий меню навигации. Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции при отображении раскрывающегося списка. Анимация и раскрывающийся список. Использование.
Создание выпадающего списка Dropdown
Добавьте к элементу блока, который должен выпадать, атрибут uk-dropdown
, расположив выпадающий список ниже вызываемого.
<button type="button"></button>
<div uk-dropdown></div>
По сути своей, выпадающий список довольно похож на Выпадение : Drop. Любой контент, например ссылка, может переключать выпадающий список.
Вы можете раскрыть выпадающий список наведением курсора мыши или нажатием на переключатель. Просто добавьте опцию mode: click
к атрибуту (только для принудительного режима 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
.
<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> <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>
Сетка Grid в выпадающем списке Dropdown
Вы можете поместить сетку из компонента Грид в раскрывающийся список, который может содержать навигацию или любой другой контент. Просто оберните содержимое элементом <div>
и добавьте атрибут uk-grid
.
Если сетка должна складываться автоматически, всякий раз, когда раскрывающийся список больше не помещается в его контейнер, добавьте класс .uk-dropdown-grid
.
<div class="uk-width-large" uk-dropdown>
<div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>
Используйте один из классов UIkit компонента Ширина, чтобы настроить ширину выпадающего списка с навигационным меню или обычным контентом.
-
-
<button class="uk-button uk-button-default" type="button">При наведении</button> <div class="uk-width-large" uk-dropdown> <div class="uk-dropdown-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-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> <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>
Позиция выпадающего списка
Добавьте один из следующих параметров в атрибут uk-dropdown
, чтобы настроить выравнивание раскрывающегося списка.
<div uk-dropdown="pos: top-left"></div>
-
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Top Right</button> <div uk-dropdown="pos: top-right; 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="uk-inline"> <button class="uk-button uk-button-default" type="button">Позиция Top Justify</button> <div uk-dropdown="pos: top-justify; 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="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>
Позиция | Описание |
---|---|
bottom-left |
Выравнивает выпадающий список по нижнему левому краю. |
bottom-center |
Выравнивает раскрывающийся список внизу по центру. |
bottom-right |
Выравнивает выпадающий список по нижнему правому краю. |
bottom-justify |
Устанавливает выпадающий список снизу и выравнивает его ширину по связанному элементу. *пример можно увидеть ниже |
top-left |
Устанавливает выпадающий список в левом верхнем углу. |
top-center |
Выравнивает выпадающий список сверху по центру. |
top-right |
Устанавливает выпадающий список сверху справа. |
top-justify |
Выравнивает раскрывающийся список по верху и выравнивает его ширину по связанному элементу. *пример можно увидеть выше |
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">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">Позиция Bottom Justify</button> <div uk-dropdown="pos: bottom-justify"> <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 переворачивается автоматически, когда он превышает край области просмотра. Если вы хотите перевернуть его в соответствии с границей контейнера, просто добавьте в атрибут uk-dropdown
параметр boundary: .my-class
, используя селектор для контейнера. Таким образом, вы можете определить любой родительский элемент в качестве границы для выпадающего списка 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-width-2-3@s"> <button class="uk-button uk-button-default uk-float-left" type="button">Hover</button> <div uk-dropdown="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">Hover</button> <div uk-dropdown="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>
Выравнивание согласно граничного контейнера
Вы также можете выровнять раскрывающийся список Dropdown по его границе. Для этого добавьте к атрибуту опцию boundary-align: true
.
<div class="my-class">
<button type="button"></button>
<div uk-dropdown="boundary: .my-class; boundary-align: true"></div>
</div>
-
-
<div class="boundary-align uk-panel uk-placeholder"> <button class="uk-button uk-button-default uk-float-left" type="button">Justify</button> <div uk-dropdown="pos: bottom-justify; boundary: .boundary-align; boundary-align: true"> <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">Center</button> <div uk-dropdown="pos: bottom-center; boundary: .boundary-align; boundary-align: true"> <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>
Смещение : 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>
Анимация и её продолжительность
Примените одну или несколько анимаций к раскрывающемуся списку 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>
Опции компонента
При использовании компонента Dropdown к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание | |
---|---|---|---|---|
toggle |
String, Boolean | - * |
CSS селектор для элемента, который будет использоваться в качестве переключателя. По умолчанию используется предыдущий элемент. | |
pos |
String | bottom-left |
Положение раскрывающегося списка. | |
mode |
String | click, hover |
Разделенный запятыми список режимов поведения триггера: hover , click |
|
delay-show |
Number | 0 |
Время задержки в миллисекундах до отображения раскрывающегося списка в режиме наведения. | |
delay-hide |
Number | 800 |
Время задержки в миллисекундах до скрытия выпадающего списка в режиме наведения. | |
boundary |
String | window |
CSS-селектор элемента для поддержки отображения выпадения. | |
boundary-align |
Boolean | false |
Выравнивать раскрывающийся список по его границе. | |
flip |
Boolean, String | true |
Автоматически перевернуть выпадение. Возможные значения: false , true , x или y . |
|
offset |
Number | 0 |
Смещение контейнера раскрывающегося списка. | |
animation |
String | false |
Разделённые пробелами названия анимаций для применения. | |
duration |
Number | 200 |
Продолжительность анимации в миллисекундах. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.dropdown(element, options);
События
Следующие события будут инициированы для элементов компонента «Dropdown»:
Название | Описание |
---|---|
toggle |
Срабатывает до переключения элемента. |
beforeshow |
Срабатывает до отображения предмета. Может предотвратить отображение, вернув false . |
show |
Срабатывает после отображения элемента. |
shown |
Запускается после завершения анимации отображённого элемента. |
beforehide |
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вернув false . |
hide |
Запускается после того, как элемент скрыт. |
hidden |
Запускается после того, как элемент спрятан. |
stack |
Срабатывает, когда применяется класс drop-stack . |
Методы
Для компонента «Dropdown» доступны следующие методы:
Показать
UIkit.dropdown(element).show();
Показывает Dropdown.
Скрыть
UIkit.dropdown(element).hide();
Скрывает Dropdown.