Компонент Выпадающий список Dropdown

Выпадающий список содержащий меню навигации 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. Чтобы определить заголовок в 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 и Dropdown

Сетка 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>
Позиция Описание
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">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>
  • <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» доступны следующие методы:

Show

UIkit.dropdown(element).show();

Показывает Dropdown.

Hide

UIkit.dropdown(element).hide();

Скрывает Dropdown.