下拉

将任意元素相对于另一个元素定位。

用法

任何内容（例如按钮）都可以切换下拉组件。只需要在拨动器后的块元素上添加 uk-drop 属性即可。

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

将鼠标悬停和点击都可以触发切换来启用下拉菜单。只需添加mode: click 属性的选项就可以强制仅支持点击 click（点击） 方式触发。如果要对切换器和下拉列表进行分组，只需将 Utility 组件中的 .uk-inline class 添加到包裹它的容器元素中。

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

Note Drop组件没有默认样式。在此示例中，我们使用了Card 组件中的卡片。

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">Hover</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">Click</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 class

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

使用 Width 组件来调整下拉组件的宽度。

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">Hover</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>

Position	Description
`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-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">Hover</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">Hover</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">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 和偏移值（单位为像素）。

<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">Hover</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 组件中animation: uk-animation-*选项之一的动画class，就能为下拉组件添加一个或多个动画，还能设置动画的持续时间，只需要将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">Hover</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>

组件选项

下面这些选项中的任何一个都可以应用于下拉组件属性。多个选项之间请用分号分隔。了解更多

Option	Value	Default	Description
`toggle`	String, Boolean	`- *`	用作切换元素的CSS选择器。默认地会使用下拉组件前一个元素作为拨动器。
`pos`	String	`bottom-left`	下拉组件的定位。
`mode`	String	`click, hover`	下拉组件的触发模式，可以是`hover`或`click`。
`delay-show`	Number	`0`	在hover（鼠标悬停）模式下下拉框出现的延迟时间（以毫秒为单位）。
`delay-hide`	Number	`800`	在hover（鼠标悬停）模式下下拉框隐藏的延迟时间（以毫秒为单位）。
`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 的选项，如果它是属性值中的唯一选项，则可以省略其键。

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

JavaScript

了解有关JavaScript 组件的更多信息。

初始化

UIkit.drop(element, options);

事件

附加此组件的元素将触发以下事件：

Name	Description
`toggle`	在切换项目之前触发。
`beforeshow`	在显示项目之前触发。可以通过调用`preventDefault()` 事件来防止显示。
`show`	显示一个项目之后触发。
`shown`	项目的显示动画完成后触发。
`beforehide`	在隐藏元素之前触发。可以通过调用 `preventDefault()` 事件来防止隐藏。
`hide`	元素被隐藏后触发。
`hidden`	元素被隐藏后触发。
`stack`	应用`drop-stack`类时触发。

方法

组件可以使用以下方法：

显示

UIkit.drop(element).show();

显示下拉组件。

隐藏

UIkit.drop(element).hide();

隐藏下拉组件。

Name	Type	Default	Description
`delay`	Boolean	true	延迟隐藏下拉组件

UIkit3.x文档