Компонент Drop

JS компонент позволяет группировать любые элементы друг с другом в связке кнопка - выпадающий блок.

Как использовать компонент Drop в UIkit 3

Любой элемент, например кнопка, может работать в качестве переключателя. Добавьте атрибут uk-drop к блоку, следующему после кнопки.

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

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

<div class="uk-inline">
    <button type="button"></button>
    <div uk-drop="mode: click"></div>
</div>

Внимание Компонент Drop не имеет собственных стилей по умолчанию. В этом примере мы использовали компонент Карточки.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Наведите</button>
    <div uk-drop>
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Кликните</button>
    <div uk-drop="mode: click">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

Сетка внутри выпадающего блока

Вы можете поместить в выпадающий блок любую разметку из компонента Сетка. Оберните содержимое в элемент <div> и добавьте ему атрибут uk-grid. Если сетка должна быть адаптивной, просто добавьте класс .uk-drop-grid и необходимые классы адаптивности из компонента Ширина.

<div class="uk-width-large" uk-drop>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 
  • <button class="uk-button uk-button-default" type="button">Наведите</button>
<div class="uk-width-large" uk-drop>
    <div class="uk-card uk-card-body uk-card-default">
        <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
            </div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
            </div>
        </div>
    </div>
</div>

Позиция

Добавьте один из следующих параметров в атрибут uk-drop атрибут для настройки выравнивания:

<div uk-drop="pos: top-left"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div uk-drop="pos: top-right">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
    <div uk-drop="pos: bottom-justify">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Center</button>
    <div uk-drop="pos: right-center">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </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 Выравнивает блок по правому краю в центре.

Граница привязки блока

По умолчанию компонент Drop переворачивается автоматически, когда не вмещается в край области просмотра. Если вы хотите перевернуть его в соответствии с границей контейнера, просто добавьте boundary: .my-class в атрибут uk-drop, используя в качестве указателя границы селектор контейнера. Таким образом, вы можете определить любой родительский элемент в качестве границы выпадения. Подход очень полезен для навигации, где используется мега-меню.

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: .my-class"></div>
</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <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-drop="boundary: .boundary">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Наведите</button>
    <div uk-drop="boundary: .boundary">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

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

Вы также можете выровнять блок по отношению к установленной границе. Добавьте в атрибут это: boundary-align: true.

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: .my-class; boundary-align: true"></div>
</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="boundary-align uk-panel uk-placeholder">

    <button class="uk-button uk-button-default uk-float-left" type="button">По ширине</button>
    <div uk-drop="pos: bottom-justify; boundary: .boundary-align; boundary-align: true">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">По центру</button>
    <div uk-drop="pos: bottom-center; boundary: .boundary-align; boundary-align: true">
        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

Смещение

Чтобы установить пользовательское смещение выпадающего блока относительно кнопки, добавьте опцию offset вместе со значением в пикселях:

<div uk-drop="offset: 80"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <button class="uk-button uk-button-default" type="button">Наведите</button>
<div uk-drop="offset: 80">
    <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

Анимация

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

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <button class="uk-button uk-button-default" type="button">Наведите</button>
<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000">
    <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

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

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

Опция Значение По умолчанию Описание
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 Задержка анимации в миллисекундах.

pos можно не указывать, если это единственный параметр в значении атрибута.

<span uk-drop="top-left"></span>

JavaScript

Подробнее о компонентах JavaScript.

Инициализация

UIkit.drop(element, options);

События

Следующие события будут инициированы для элемента:

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

Методы

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

Show

UIkit.drop(element).show();

Отображает выпадашку.

Hide

UIkit.drop(element).hide();

Скрывает выпадашку.