Компонент Выпадение : Капля : Drop

Отображение содержимого по типу выпадения.

Отображение в виде выпадения можно настроить как при наведении на вызываемый элемент, так и при клике на него. Появление содержимого с любой стороны. Расположите любой элемент в связке с другим, заранее невидимым.

Создание выпадения

Любой контент, например обыкновенная кнопка, может переключать компонент Выпадение, отображая изначально невидимое содержимое.

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

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

Ниже расположен простой пример с выпадением / отображением невидимого контента.

Для невидимого контента используется компонент Алерт, а кнопка получила стили из компонента Кнопка.

  • Это компонент «Выпадение» в работе. Дополнительно используется компонент «Алерт»
  • <button class="uk-button uk-button-primary" type="button">Показать содержимое</button>
    <div class="uk-alert-primary" uk-alert uk-drop>Это компонент «Выпадение» в работе. Дополнительно используется компонент «Алерт»</div>

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

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

Отзывчивый резиновый макет внутри Выпадения

Макет модульной сетки Grid внутри выпадения. Вы можете разместить грид-сетку из компонента Грид внутри выпадения. Просто оберните содержимое элементом <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.
    Мой гинеколог подписался на мой Инстаграм. Даже и не знаю, что он хочет еще увидеть.
  • <button class="uk-button uk-button-secondary" 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>
                    Мой гинеколог подписался на мой Инстаграм. Даже и не знаю, что он хочет еще увидеть.
                </div>
            </div>
        </div>
    </div>

Устанавливаем позицию «Выпадению»

Содержимое Выпадения (невидимое содержимое) может быть показано с любой стороны. Добавьте один из следующих параметров в атрибут uk-drop, чтобы установить необходимую позицию выпадению.

<div uk-drop="pos: top-left"></div>
  • У соседа перфоратор, зато у меня пианино. Ремонты кончаются, а музыка вечна!
    Купила китайский чай для похудения. С тортиком - обалденно!
  • <div class="uk-inline">
        <button class="uk-button uk-button-primary" type="button">Left Center</button>
        <div uk-drop="pos: left-center">
            <div class="uk-card uk-card-body uk-card-primary">У соседа перфоратор, зато у меня пианино. Ремонты кончаются, а музыка вечна!</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">Купила китайский чай для похудения. С тортиком - обалденно!</div>
        </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="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">Пришла домой, а на столе записка: "Все хорошо, я у бабы". Сижу вот и думаю, муж или сын...</div>
        </div>
    </div>
    <div class="uk-inline">
        <button class="uk-button uk-button-primary" type="button">Bottom Justify</button>
        <div uk-drop="pos: bottom-justify">
            <div class="uk-card uk-card-body uk-card-primary">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 Center</button>
        <div uk-drop="pos: bottom-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 Выравнивает выпадение справа по нижнему краю связанного элемента.

Граница : Boundary

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

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="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-drop="boundary: .boundary">
            <div class="uk-card uk-card-body uk-card-default">Жизнь только для того красна, кто стремится к постоянно достигаемой, но никогда не достижимой цели.</div>
        </div>
        <button class="uk-button uk-button-default uk-float-right" type="button">Hover</button>
        <div uk-drop="boundary: .boundary">
            <div class="uk-card uk-card-body uk-card-default">Нет поэзии в безмятежной и блаженной жизни! Надо, чтобы что-нибудь ворочало душу и жгло воображение.</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">Justify</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">Center</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

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

<div uk-drop="offset: 85"></div>
  • Если бы я спрашивал, чего хотят люди, они до сих пор ездили бы на повозках.
  • <button class="uk-button uk-button-default" type="button">Наведи на меня</button>
    <div uk-drop="offset: 85">
        <div class="uk-card uk-card-body uk-card-default">Если бы я спрашивал, чего хотят люди, они до сих пор ездили бы на повозках.</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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
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 является Primary опцией. Если pos это единственный параметр в значении атрибута, то её ключ можно не использовать.

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

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

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

UIkit.drop(element, options);

События

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

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

Методы

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

Показать

UIkit.drop(element).show();

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

Скрыть

UIkit.drop(element).hide();

Скрывает Drop.

Документация
Компоненты