Компонент Dropdown

Определяет различные стили для выпадающих списков.

Как использовать компонент Dropdown в UIkit 3. Изучаем выпадающие элементы.

В UIkit 3 компонент Dropdown был разделен на две части: JS и оформление. JS часть переехала в компонент Drop. Включать выпадающие списки может любой элемент, будь то ссылка или картинка. Добавьте атрибут uk-dropdown к элементу блока после переключения. Мы на данном этапе не указываем никаких параметров, поэтому срабатывать Dropdown будет по клику на предыдущем элементе, т.е. кнопке. 

<button type="button"></button>
<div uk-dropdown></div>

Вы можете отобразить выпадающий список, наведя курсор на кнопку или нажав на нее. Доступны 2 опции: клик и наведение. Добавьте опцию mode: click, чтобы включить активацию по клику. Используйте опцию mode: hover, чтобы включить активацию в режиме наведения. По умолчанию работает на hover. Если вы хотите сгруппировать переключатель и и его раскрывающийся список, оберните оба элемента в div с классом .uk-inline из компонента Утилиты.

<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

Выпадающий список часто используется для создания меню из компонента Навигация. Добавьте класс .uk-nav и модификатор .uk-dropdown-nav к элементу <ul>.

<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>

  • <button class="uk-button uk-button-default" 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>

Сетки в компоненте 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>

Используйте один из классов из компонента Ширина для установки настроек внутри сетки.

  • <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">
        <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>

<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 Выравнивает выпадающий список справа снизу.

Установка границы всплытия

По умолчанию выпадающий список переворачивается автоматически, когда не помещается в край области просмотра. Если вы хотите переворачивать его в соответствии с границей контейнера, добавьте опцию boundary: .my-class в атрибут uk-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">Наведите</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">Наведите</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>

Выравнивание относительно установленной границы

Вы можете выравнивать выпадающий список по его новой границе. Добавьте опцию boundary-align: true в атрибут uk-dropdown.

<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 и значение в пикселях:

<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>

Анимация

Примените одну или несколько анимаций к раскрывающемуся списку, добавив опцию animation: uk-animation-* вместе с классом из компонента Анимация. Здесь же можно установить продолжительность анимации. Добавьте опцию duration и ее значение:

<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 500"></div>

  • <button class="uk-button uk-button-default" type="button">Наведите</button>
<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000">
        <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>

Все опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о JS компонентах

Опция Значения По умолчанию Описание
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.dropdown(element, options);

События

Для компонента доступные следующие события:

Name Description
toggle Срабатывает до переключения.
beforeshow Сробатывает до появления объекта. Может отменить показ, вернув false.
show Срабатывает после появления объекта.
shown Запускается после завершения анимации появления.
beforehide Срабатывает до скрытия объекта. Может отменить скрытие, вернув false.
hide Срабатывает после скрытия объекта.
hidden Срабатывает после скрытия объекта.
stack Срабатывает, когда класс drop-stack применен.

Methods

Для компонента доступны следующие методы:

Show

UIkit.dropdown(element).show();

Отображает объект.

Hide

UIkit.dropdown(element).hide();

Скрывает объект.