UIkit3.x文档

下拉

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

用法

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

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

如果要对切换器和下拉列表进行分组，只需将 Utility 组件中的 .uk-inline class 添加到包裹它的容器元素中。

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

Note 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选项以更改触发方式。

模式 描述
click,hover 在单击和悬停时触发。
click 仅在单击时触发。
hover 仅在悬停时触发。 
<div uk-drop="mode: click"></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">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>

在下拉组件中使用网格

可以将 Grid 组件 的网格放在drop组件中。 只需往 <div> 元素添加uk-grid 属性并用它包裹住内容。 如果需要网格在drop组件的尺寸不适合的时候自动堆叠的话，只需再额外添加.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>

定位

默认情况下，drop位于触发按钮的下方。要更改其位置，请在uk-drop属性内添加pos选项。值的第一部分是指将drop放在触发按钮的哪一侧，第二部分定义它与触发按钮的对齐方式。

位置描述
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.
    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 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>

边界

默认情况下，下拉菜单超出视口的边缘或任何其他父滚动祖先元素时都会自动翻转到另外一侧，防止它遮挡住触发开关。，并改变其对齐方式以适应视口。要设置为滚动祖先元素以外的其他边界，只需在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.
    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>
  • 对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
    对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
  • <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选项，这样只会在打开时进行定位。

<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>
  • 对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
    对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
  • <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 位于触发开关的外部。要将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.
    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 组件中的任意一个动画类选项animation: uk-animation-*，就能为drop组件添加一个或多个动画。同时还能设置动画的持续时间，只需要添加以毫秒为单位的duration 选项。设置animate-out: true可以在关闭drop时也显示动画。

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>
  • 对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
  • <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位置固定，从设定的方向展开显示其内容。

动画 描述
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>
  • 对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
    对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
    对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
    对客户来说，跟随客户的培训是非常重要的，但这是同时发生的。
  • <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 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>

组件选项

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

选项 值 默认值 描述
toggle CSS selector - * 指定用于触发元素的 CSS 选择器。默认情况下是前一个元素。
pos String bottom-left Drop的位置。
stretch Boolean,x,y true 在2个（true）轴或给定轴上拉伸drop。
mode click, hover click, hover 触发的模式，多个值以逗号“, ”分隔。
delay-show 数字 0 悬停模式下drop出现时的延迟时间，以毫秒为单位。
delay-hide 数字 800 悬停模式下drop隐藏时的延迟时间，以毫秒为单位。
auto-update Boolean true 通过将此选项设置为 来禁用滚动时的动态定位false。
boundary CSS 选择器 false drop不能超过的区域，超过后会导致它翻转位置。默认是最近的滚动祖先。
boundary-x CSS 选择器 false drop不能超过x轴上的区域，超过后会导致它翻转位置。
boundary-y CSS 选择器 false drop不能超过x轴上的区域，超过后会导致它翻转位置。
target Boolean, CSS selector false 放置到的元素（对于窗口为true）。
target-x Boolean, CSS selector false 放置到元素的 X 轴（对于窗口为true）。
target-y Boolean, CSS selector false 放置到元素的 Y 轴（对于窗口为true）。
inset Boolean false 定位在其目标内。
flip Boolean true 如果drop溢出边界，则沿主轴翻转drop。
shift Boolean true 如果drop溢出边界，则沿交叉轴移动drop。
offset 数字 0 drop的偏移量。
animation String uk-animation-fade 以空格分隔的动画名称。动画输出用逗号分隔。
animate-out Boolean false 关闭 drop 时使用动画。
bg-scroll Boolean true 打开 drop 时允许背景滚动。
duration 数字 200 动画持续时间。
container Boolean false 通过选择器定义一个目标容器，以指定应该drop 在 DOM 中的附加位置。

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(delay);

隐藏下拉组件。

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