Drop

把任意元素定位到另一个元素附近。

Drop 组件具备方向感知能力。这意味着只要鼠标指针朝 drop 方向移动，drop 就会保持打开。额外的延迟确保即使鼠标指针短暂移向其他方向，drop 依然保持打开。如果悬停了另一个菜单项，当前的 drop 会立即关闭。

用法

任何内容（例如按钮）都可以切换 drop 组件。只需为切换元素后面的块级元素添加 uk-drop 属性。

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

要把切换元素和 dropdown 归为一组，只需用一个容器元素包裹它们，并添加 Utility 组件中的 .uk-inline 类。

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

注意 Drop 组件没有默认样式。在本示例中，我们使用了 Card 组件中的卡片来便于观察。

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

模式

默认情况下，drop 在悬停和点击时都会切换。设置 mode 选项可以改变切换行为。

Mode	说明
`click,hover`	点击或悬停时切换 drop。
`click`	仅在点击时切换 drop。
`hover`	仅在悬停时切换 drop。

<div uk-drop="mode: click"></div>

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

父级图标

要创建父级图标，只需为一个 <span> 元素添加 uk-drop-parent-icon 属性。

<button type="button">Parent <span uk-drop-parent-icon></span></button>
<div uk-drop="mode: click"></div>

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">Parent <span uk-drop-parent-icon></span></button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

宽度与网格

你可以在 drop 中放置 Grid 组件的网格。只需用一个 <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>

使用 Width 组件中的某个类来调整 drop 的宽度。

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-card uk-card-body uk-card-default uk-width-large" uk-drop>
    <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>

定位

默认情况下，drop 定位在切换元素下方。要改变位置，为 uk-drop 属性设置 pos 选项。值的第一部分表示 drop 定位在哪一侧，第二部分定义它相对于切换元素的对齐方式。

Position	说明
`top-left`	将 drop 定位在切换元素上方，并左对齐。
`top-center`	将 drop 定位在切换元素上方，并居中对齐。
`top-right`	将 drop 定位在切换元素上方，并右对齐。
`bottom-left`	将 drop 定位在切换元素下方，并左对齐。
`bottom-center`	将 drop 定位在切换元素下方，并居中对齐。
`bottom-right`	将 drop 定位在切换元素下方，并右对齐。
`left-top`	将 drop 定位在切换元素左侧，并顶部对齐。
`left-center`	将 drop 定位在切换元素左侧，并居中对齐。
`left-bottom`	将 drop 定位在切换元素左侧，并底部对齐。
`right-top`	将 drop 定位在切换元素右侧，并顶部对齐。
`right-center`	将 drop 定位在切换元素右侧，并居中对齐。
`right-bottom`	将 drop 定位在切换元素右侧，并底部对齐。

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

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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: top-right">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">Bottom Center</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-center">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">Right Top</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

默认情况下，当 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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary">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 Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

移动与翻转

要禁用自动移动和翻转，请为 uk-drop 属性添加 shift: false 或 flip: false 选项。

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary; shift: false; flip: false">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 Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary; shift: false; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

自动更新

默认情况下，drop 会在滚动时重新定位。要禁用动态定位，请为 uk-drop 属性添加 auto-update: false 选项。这样 drop 只在打开时定位一次。

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

目标元素

默认情况下，drop 对齐到它的切换元素。要把 drop 定位到其他元素，只需为 uk-drop 属性添加 target: SELECTOR 选项。如果只想改变 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.

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

内嵌

默认情况下，drop 定位在切换元素外部。要把位置改到内部，请为 uk-drop 属性添加 inset: true 选项。只有在同时设置了 target 选项时才应使用该选项，这样 drop 才不会遮住自己的切换元素。

<div uk-drop="target: .my-class; inset: true"></div>

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>

拉伸

要让 drop 拉伸到最近的可滚动祖先元素的大小，请为 uk-drop 属性添加 stretch: true 选项。如果只想在单个轴上拉伸，使用 stretch: x 或 stretch: y。如果设置了 boundary 选项，drop 会拉伸到所定义的边界。

<div uk-drop="stretch: true"></div>

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href>Hover</a>
                <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
            </li>
        </ul>

    </div>
</nav>

动画

通过添加 animation: uk-animation-* 选项，并配合 Animation 组件中的某个类，可以为 dropdown 应用一个或多个动画。你还可以指定动画时长，只需添加 duration 选项，值为毫秒数。设置 animate-out: true 可以在关闭 drop 时也显示动画。

<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 class="uk-card uk-card-body uk-card-default" uk-drop="animation: uk-animation-slide-top-small; animate-out: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

另外，Drop 组件还提供两种 Animation 组件未涵盖的动画类型。slide-* 动画会让 drop 及其内容从指定方向滑入，而在 reveal-* 动画中，drop 的内容保持静止，从指定方向逐渐显露出来。

Animation	说明
`slide-top`	从顶部滑入 drop。
`slide-bottom`	从底部滑入 drop。
`slide-left`	从左侧滑入 drop。
`slide-right`	从右侧滑入 drop。
`reveal-top`	从顶部显露 drop。
`reveal-bottom`	从底部显露 drop。
`reveal-left`	从左侧显露 drop。
`reveal-right`	从右侧显露 drop。

<div uk-drop="animation: slide-top; animate-out: true"></div>

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>

偏移

要定义 drop 与其切换元素之间的自定义偏移，请添加 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 class="uk-card uk-card-body uk-card-default" uk-drop="offset: 80">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项	值	默认值	说明
`toggle`	CSS selector	`- *`	用作切换元素的 CSS 选择器。默认为前一个元素。
`pos`	String	`bottom-left`	drop 的位置。
`stretch`	Boolean, String	`false`	在两个轴（true）或指定轴（`x`、`y`）上拉伸 drop。
`mode`	String	`click, hover`	以逗号分隔的 drop 触发行为模式列表（`click`、`hover`）。
`delay-show`	Number	`0`	悬停模式下显示 drop 前的延迟时间，单位为毫秒。
`delay-hide`	Number	`800`	悬停模式下隐藏 drop 前的延迟时间，单位为毫秒。
`auto-update`	Boolean	`true`	将该选项设为 `false` 可禁用滚动时的动态定位。
`boundary`	CSS selector	`false`	drop 不可超出的区域，超出时会翻转和移动。默认是最近的可滚动祖先元素。
`boundary-x`	CSS selector	`false`	drop 在 X 轴上不可超出的区域，超出时会翻转和移动。
`boundary-y`	CSS selector	`false`	drop 在 Y 轴上不可超出的区域，超出时会翻转和移动。
`target`	Boolean, CSS selector	`false`	drop 所对齐的目标元素（`true` 表示窗口）。
`target-x`	Boolean, CSS selector	`false`	drop 所对齐的目标元素的 X 轴（`true` 表示窗口）。
`target-y`	Boolean, CSS selector	`false`	drop 所对齐的目标元素的 Y 轴（`true` 表示窗口）。
`inset`	Boolean	`false`	定位在目标元素内部。
`flip`	Boolean	`true`	当 drop 超出边界时，沿主轴翻转。
`shift`	Boolean	`true`	当 drop 超出边界时，沿交叉轴移动。
`offset`	Number	`0`	drop 的偏移量。
`animation`	String	`uk-animation-fade`	以空格分隔的动画名称。以逗号分隔表示出场动画。
`animate-out`	Boolean	`false`	关闭 drop 时使用动画。
`bg-scroll`	Boolean	`true`	允许 drop 打开时背景滚动。
`close-on-scroll`	Boolean	`false`	滚动父级滚动容器时关闭 drop。
`duration`	Number	`200`	动画时长。
`container`	Boolean	`false`	通过选择器定义目标容器，用于指定 drop 应被追加到 DOM 中的位置。

pos 是 Primary 选项，如果属性值中只有这一个选项，可以省略它的键名。

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

JavaScript

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

初始化

UIkit.drop(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

名称	说明
`toggle`	条目被切换前触发。
`beforeshow`	条目显示前触发。可以通过在事件上调用 `preventDefault()` 来阻止显示。
`show`	条目显示后触发。
`shown`	条目的显示动画完成后触发。
`beforehide`	条目隐藏前触发。可以通过在事件上调用 `preventDefault()` 来阻止隐藏。
`hide`	条目隐藏前触发。
`hidden`	条目隐藏后触发。
`stack`	应用 `drop-stack`类时触发。

方法

以下方法可用于该组件：

Show

UIkit.drop(element).show();

显示 drop。

Hide

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

隐藏 drop。

名称	类型	默认值	说明
`delay`	Boolean	true	延迟隐藏 drop。

可访问性

Drop 组件遵循 Menu Button WAI-ARIA 设计模式，并自动设置合适的 WAI-ARIA 角色、状态和属性。

toggle 具有 button 角色、aria-expanded 状态和 aria-haspopup 属性。

键盘交互

Drop 组件可以通过以下按键使用键盘访问。

enter 或 space 键打开和关闭 drop。
esc 键关闭 drop，即使焦点已经移到其他元素上。

文档

Drop