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

Выпадающий список содержащий меню навигации Dropdown (дропдаун). Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции при отображении раскрывающегося списка. Анимация и раскрывающийся список. Использование.

Создание

Создание выпадающего списка Dropdown

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

<button type="button">кнопка</button>
<div uk-dropdown></div>

По сути своей, выпадающий список довольно похож на Выпадение : Drop. Любой контент, например ссылка, может переключать выпадающий список.

Вы можете раскрыть выпадающий список наведением курсора мыши или нажатием на переключатель. Только для принудительного режима click достаточно просто добавить опцию mode: 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

Сетка Grid в выпадающем списке Dropdown

Вы можете поместить сетку из компонента Грид в раскрывающийся список Dropdown, который в свою очередь может содержать навигацию или любой другой контент. Просто оберните содержимое элементом <div> и добавьте атрибут uk-grid.

Если сетка должна складываться автоматически, всякий раз, когда раскрывающийся список больше не помещается в его контейнер, добавьте класс .uk-drop-grid. 

<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>

Используйте один из классов UIkit компонента Ширина, чтобы настроить ширину выпадающего списка с навигационным меню или обычным контентом. 

  • <div class="uk-panel-scrollable uk-width-xlarge@l">
	
<button class="uk-button uk-button-default" type="button">Нажми</button>
<div class="uk-width-large" uk-dropdown="mode: click">
    <div class="uk-drop-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-divider"></li>
                <li><a href="#">Самостоятельный пункт</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <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>

</div>

Модификатор «Large»

Класс-модификатор .uk-dropdown-large позволяет увеличить внутренний отступ. Добавьте класс .uk-dropdown-large для раскрывающегося контента с большим отступом. 

<div class="uk-dropdown-large" uk-dropdown></div>
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Увеличенный отступ</button>
    <div class="uk-dropdown-large" 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>
</div>

Позиция

Позиция выпадающего списка

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

<div uk-dropdown="pos: top-left"></div>

Добавьте один из следующих параметров в атрибут uk-dropdown, чтобы настроить выравнивание списка «Дропдаун»:

Позиция Описание
top-left Устанавливает выпадающий список в левом верхнем углу.
top-center Выравнивает выпадающий список сверху по центру.
top-right Устанавливает выпадающий список сверху справа.
bottom-left Выравнивает выпадающий список по нижнему левому краю.
bottom-center Выравнивает раскрывающийся список внизу по центру.
bottom-right Выравнивает выпадающий список по нижнему правому краю.
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">
        <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">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>

Граница (Boundary)

По умолчанию раскрывающийся список Dropdown переворачивается автоматически, когда он превышает край области просмотра или выходит за пределы любого другого родительского предка прокрутки. Dropdown перевернет свое положение на другую сторону изменив своё направление, чтобы соответствовать размеру окна просмотра. Если вы хотите перевернуть его в соответствии с границей контейнера, просто добавьте в атрибут uk-dropdown параметр boundary: SELECTOR используя селектор контейнера. Таким образом, вы можете определить любой родительский элемент в качестве границы для выпадающего списка 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-height-small">
	
    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; 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">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; 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>

Shift и Flip

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

<div uk-dropdown="shift: false; flip: false"></div>

  • <div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; boundary: !.boundary; shift: false; 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>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false; 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="boundary 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-dropdown="pos: bottom-right; boundary: !.boundary; flip: false">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Нижний пункт</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-secondary uk-float-right" type="button">BL + shift: false</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Нижний пункт</a></li>
        </ul>
    </div>

</div>

<div class="boundary 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-dropdown="pos: bottom-right; boundary: !.boundary; flip: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Нижний пункт</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-secondary uk-float-right" type="button">BL + shift: true</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Нижний пункт</a></li>
        </ul>
    </div>

</div>

Auto Update

По умолчанию выпадение перемещается при прокрутке. Чтобы отключить динамическое позиционирование, добавьте опцию auto-update: false к атрибуту uk-dropdown. Выпадающий список «Дропдаун» будет позиционироваться только один раз при открытии. 

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

Target

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

<div class="my-class">
    <button type="button">Переключатель</button>
    <div uk-dropdown="target: !.my-class"></div>
</div>

  • <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 uk-dropdown="pos: bottom-left; target: !.target">
        <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">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target">
        <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>

Inset

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

<div uk-dropdown="target: .my-class; inset: true"></div>
  • <div class="target uk-panel uk-placeholder uk-height-large">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; target: !.target; inset: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><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">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target; inset: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-nav-header">Заголовок</li>
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Название пункта</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Бумбарашка</a></li>
        </ul>
    </div>

</div>

Stretch

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

<div uk-dropdown="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-dropdown="boundary: !.uk-navbar; stretch: x; 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>
            </li>
        </ul>

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

Анимации Slide и Reveal

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

Анимации slide-* и reveal-*.
Анимация Описание
slide-top Сдвигает раксрывающееся содержимое сверху.
slide-bottom Сдвигает раксрывающееся содержимое снизу.
slide-left Сдвигает раксрывающееся содержимое слева.
slide-right Сдвигает раксрывающееся содержимое справа.
reveal-top Отображает контент выезжая сверху.
reveal-bottom Отображает контент выезжая снизу.
reveal-left Отображает контент выезжая слева.
reveal-right Отображает контент выезжая справа. 
  • <div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div uk-dropdown="animation: slide-top; animate-out: true; duration: 700">
            <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">Reveal Top</button>
        <div uk-dropdown="animation: reveal-top; animate-out: true; duration: 700">
            <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">Slide Left</button>
        <div uk-dropdown="animation: slide-left; animate-out: true; duration: 700">
            <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">Reveal Left</button>
        <div uk-dropdown="animation: reveal-left; animate-out: true; duration: 700">
            <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>

Смещение (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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

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

JavaScript

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

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

UIkit.dropdown(element, options);

События

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

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

Методы

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

Show

UIkit.dropdown(element).show();

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

Hide

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

Скрывает Dropdown.

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

Доступность

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

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

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

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

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