Компонент Выпадение

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

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

Drop: Создание

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

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

Чтобы сгруппировать переключатель и каплю, просто оберните их элементом-контейнером и добавьте класс .uk-inline из компонента Utility. 

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

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

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

Режимы

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

Режим Описание
click,hover Переключать выпадение и при нажатии и при наведении.
click Переключить только при нажатии на элемент.
hover Переключение только при наведении. 
<div class="uk-inline">
    <button type="button"></button>
    <div uk-drop="mode: click"></div>
</div>
Примечание Компонент Drop не имеет стилей по умолчанию. В примере используется карточка из компонента Карта.
Хочемо дивувати стильних особистостей зручністю безпрограшних домовленостей.
Систематичне вдосконалення, оригінальні ціни, управлінська майстерність та розробка.
Завдяки надійним та прогресивним продуктам та послугам, кваліфікованим співробітникам. 
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Наведи и нажми</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop>
        Хочемо дивувати стильних особистостей зручністю безпрограшних домовленостей.
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Наведи</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: hover">
        Систематичне вдосконалення, оригінальні ціни, управлінська майстерність та розробка.
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Нажми</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">
        Завдяки надійним та прогресивним продуктам та послугам, кваліфікованим співробітникам.
    </div>
</div>

Родительская иконка

Чтобы создать родительский значок (иконку), просто добавьте атрибут uk-drop-parent-icon к элементу <span>. 

<button type="button">Кнопка <span uk-drop-parent-icon></span></button>
<div uk-drop="mode: click"></div>
Одна з ведучих світових компаній надає широкий спектр послуг. 
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Клацнути <span uk-drop-parent-icon></span></button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">
    	Одна з ведучих світових компаній надає широкий спектр послуг.
    </div>
</div>

Ширина и Grid

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

Вы можете разместить модульныую грид-сетку из компонента Грид внутри выпадения Drop. Просто оберните содержимое элементом <div> и добавьте атрибут uk-grid. Если модульная сетка должна складываться автоматически, всякий раз, когда drop-выпадение больше не соответствует своему контейнеру, просто добавьте класс .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>

Используйте один из классов компонента Ширина элементов, чтобы настроить ширину содержимого drop-выпадения.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Мой гинеколог подписался на мой Инстаграм. Даже и не знаю, что он хочет еще увидеть. 
<div class="uk-panel-scrollable uk-width-xlarge@l">

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

</div>

Позиция

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

По умолчанию выпадение контента расположено под переключателем. Чтобы изменить его положение при открытии, установите опцию pos с необходимым значением в атрибут uk-drop. Первая часть значения относится к стороне на которой расположена капля, а вторая часть определяет ее выравнивание по отношению к переключателю. 

<div uk-drop="pos: top-left"></div>
Доступные позиции для выпадения:
Позиция Описание
top-left Отображает выпадение сверху слева.
top-center Отображает выпадение сверху по центру.
top-right Отображает выпадение сверху справа.
bottom-left Выравнивает выпадение внизу слева.
bottom-center Выпадение будет расположено снизу по центру.
bottom-right Выпадение будет расположено внизу справа.
left-top Выравнивает выпадение слева по верхнему краю связанного элемента.
left-center Выпадение будет расположено слева по середине.
*пример можно увидеть ниже
left-bottom Выравнивает выпадение слева по нижнему краю связанного элемента.
right-top Выравнивает выпадение справа по верхнему краю связанного элемента.
right-center Выравнивает выпадение справа по центру.
*пример можно увидеть ниже
right-bottom Выравнивает выпадение справа по нижнему краю связанного элемента.
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 uk-margin>
    <div class="uk-inline">
        <button class="uk-button uk-button-primary" type="button">Top Left</button>
        <div uk-drop="pos: top-left">
            <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>

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

    <div class="uk-inline">
        <button class="uk-button uk-button-primary" 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>

Граница (Boundary)

Вы можете выравнивать каплю относительно её граничного контейнера. По умолчанию Drop переворачивается автоматически на другую сторону, когда она превышает край области просмотра или любого другого родительского предка прокрутки, чтобы соответствовать размеру окна просмотра. Если вы хотите перевернуть её в соответствии с границей какого-либо контейнера, отличной от предка прокрутки, просто добавьте к атрибуту uk-drop параметр boundary: SELECTOR, используя селектор контейнера.
Чтобы установить границу только по одной оси, используйте boundary-x: SELECTOR или boundary-y: SELECTOR. 

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: !.my-class"></div>
</div>
Жизнь только для того красна, кто стремится к постоянно достигаемой, но никогда не достижимой цели.
Нет поэзии в безмятежной и блаженной жизни! Надо, чтобы что-нибудь ворочало душу и жгло воображение.
<div class="block-boundary uk-panel uk-placeholder">
	
    <button class="uk-button uk-button-primary uk-float-left" type="button">Bottom Righ</button>
    <div uk-drop="pos: bottom-right; boundary: !.block-boundary">
        <div class="uk-card uk-card-body uk-card-default">Жизнь только для того красна, кто стремится к постоянно достигаемой, но никогда не достижимой цели.</div>
    </div>
    
    <button class="uk-button uk-button-primary uk-float-right" type="button">Bottom Left</button>
    <div uk-drop="pos: bottom-left; boundary: !.block-boundary">
        <div class="uk-card uk-card-body uk-card-default">Нет поэзии в безмятежной и блаженной жизни! Надо, чтобы что-нибудь ворочало душу и жгло воображение.</div>
    </div>
    
</div>

Смещение и переворачивание (Shift и Flip)

По умолчанию shift и flip имеют значение true. Чтобы отключить автоматическое смещение (shift) и переворачивание (flip), добавьте параметр shift: false или flip: false к uk-drop атрибуту. 

<div uk-drop="shift: false; flip: false"></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.
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="boundary-container uk-panel uk-placeholder uk-height-small uk-background-muted">
	
    <button class="uk-button uk-button-primary uk-float-left" type="button">Bottom Right</button>
    <div uk-drop="pos: bottom-right; boundary: !.boundary-container; shift: false; flip: false">
        <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-primary uk-float-right" type="button">Bottom Left</button>
    <div uk-drop="pos: bottom-left; boundary: !.boundary-container; shift: false; flip: false">
        <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="boundary-container uk-panel uk-placeholder uk-height-small uk-background-muted">
	
    <button class="uk-button uk-button-secondary uk-float-left" type="button">BR + flip: false</button>
    <div uk-drop="pos: bottom-right; boundary: !.boundary-container; flip: false">
        <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-secondary uk-float-right" type="button">BL + shift: false</button>
    <div uk-drop="pos: bottom-left; boundary: !.boundary-container; shift: false;">
        <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="boundary-container uk-panel uk-placeholder uk-height-small uk-background-muted">
	
    <button class="uk-button uk-button-secondary uk-float-left" type="button">BR + flip: true</button>
    <div uk-drop="pos: bottom-right; boundary: !.boundary-container; flip: 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-secondary uk-float-right" type="button">BL + shift: true</button>
    <div uk-drop="pos: bottom-left; boundary: !.boundary-container; shift: 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>

Автоматическое обновление

По умолчанию Drop перемещается при прокрутке. Чтобы отключить динамическое позиционирование, добавьте auto-update: false к атрибуту uk-drop. Капля будет позиционирована только один раз при открытии. 

<div uk-drop="auto-update: false"></div>

Target

По умолчанию капля выравнивается по своему переключателю. Чтобы направить каплю на другой элемент, просто добавьте опцию target: SELECTOR к атрибуту uk-drop. Чтобы изменить только сторону, на которой расположена капля, или требуется выравнивание по другому элементу, используйте target-x: SELECTOR или target-y: SELECTOR. 

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="target: !.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="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

Inset

По умолчанию капля располагается за пределами переключателя. Чтобы изменить положение внутрь, добавьте inset: true опцию к uk-drop атрибуту. Эту опцию следует использовать только в том случае, если target опция также установлена так, что капля не перекрывает переключатель. 

<div uk-drop="target: .my-class; inset: true"></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="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

Stretch

Чтобы растянуть каплю, чтобы заполнить размер ее ближайшего прокручивающегося предка, добавьте stretch: true опцию к uk-drop атрибуту. Чтобы растянуть только до одной оси используйте stretch: x или stretch: y. Если опция boundary установлена, то drop-капля станет растягиваться до заданной границы. 

<div uk-drop="stretch: true"></div>
  • Наведи
    Одна з провідних глобальних організацій здійснює діяльність інновацій. 
<div class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Наведи</a>
                <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
                	Одна з провідних глобальних організацій здійснює діяльність інновацій.
                </div>
            </li>
        </ul>

    </div>
</div>

Анимация

Анимация и её продолжительность

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

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000; animate-out: true"></div>
Завдяки технологічним та інноваційним продуктам та послугам, талановитим працівникам. 
<button class="uk-button uk-button-default" type="button">Наведи на меня</button>
<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000; animate-out: true">
    <div class="uk-card uk-card-body uk-card-default">
    	Завдяки технологічним та інноваційним продуктам та послугам, талановитим працівникам.
    </div>
</div>

Кроме того, компонент Drop имеет два дополнительных типа анимации, которые не охватываются компонентом Animation. Анимация slide-* перемещает каплю и ее содержимое в выбранном направлении, в то время как при reveal-* анимации содержимое капли остается статичным и открывается с выбранного направления.

Анимация Описание
slide-top Скользит всё содержимое капли сверху.
slide-bottom Скользит всё содержимое капли снизу.
slide-left Скользит всё содержимое капли слева.
slide-right Скользит всё содержимое капли справа.
reveal-top Показывает контент выезжая сверху.
reveal-bottom Показывает контент выезжая снизу.
reveal-left Показывает контент выезжая слева.
reveal-right Показывает контент выезжая справа. 
<div uk-drop="animation: slide-top; animate-out: true"></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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
<div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-left; animate-out: true; duration: 700">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>

Параметры для атрибута

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

Опции компонента

Опция Значение По умолчанию Описание
toggle CSS selector - * CSS селектор для элемента, который будет использоваться в качестве переключателя. По умолчанию используется предыдущий элемент.
pos String bottom-left Положение (позиция) капли.
stretch Boolean, String false Растянуть падение по обеим (true) или заданным осям (x, y).
mode String click, hover Разделенный через запятую список режимов поведения триггера (click, hover).
delay-show Number 0 Время задержки в миллисекундах до отображения выпадения контента.
delay-hide Number 800 Время задержки в миллисекундах до скрытия капли.
auto-update Boolean true Отключите динамическое позиционирование при прокрутке, установив для этого параметра значение false.
boundary CSS selector false Область, которую капля не может превысить, заставляя её переворачиваться и сдвигаться. По умолчанию ближайший предок прокрутки.
boundary-x CSS selector false Область по оси x, которую капля не может превышать, заставляя её переворачиваться и смещаться.
boundary-y CSS selector false Область по оси y, которую капля не может превышать, заставляя её переворачиваться и смещаться.
target Boolean, CSS selector false Элемент, к которому позиционируется капля
(true for window).
target-x Boolean, CSS selector false Ось X элемента, на которую позиционируется капля
(true for window).
target-y Boolean, CSS selector false Ось Y элемента, на которую позиционируется капля
(true for window).
inset Boolean false Позиция внутри своей цели.
flip Boolean true Сместите каплю вдоль главной оси, если она выходит за границу.
shift Boolean true Сместите каплю по поперечной оси, если она выходит за границу.
offset Number 0 Смещение капли.
animation String uk-animation-fade Разделенные пробелами названия анимаций для применения.
animate-out Boolean false Использовать анимацию при закрытии капли.
bg-scroll Boolean true Разрешить фоновую прокрутку, когда капля открыта.
close-on-scroll Boolean false Закрыть каплю при прокрутке родительского scroll-контейнера.
duration Number 200 Продолжительность анимации в миллисекундах.
container Boolean false Определите целевой контейнер с помощью селектора, чтобы указать, куда в DOM следует добавить каплю.

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

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

JavaScript

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

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

UIkit.drop(element, options);

События

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

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

Методы

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

Show

UIkit.drop(element).show();

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

Hide

UIkit.drop(element).hide(delay);

Скрывает Drop.

Имя Тип По умолчанию Описание
delay Boolean true Задержка скрытия капли.

Доступность

Компонент Drop (отображение содержимого по типу выпадения) соответствует Menu Button Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

Переключатель имеет роль button, состояние aria-expanded и свойство aria-haspopup.

Взаимодействие с клавиатурой

Доступ к компоненту Drop можно получить с клавиатуры используя следующие кнопки:

  • Клавиши enter или space открывают и закрывают отображение drop.
  • Клавиша esc закрывает выпадающий Drop, даже если фокус переместился на другой элемент.