下拉／Drop

# 下拉／Drop

<p class="uk-text-lead">将任意元素相对于另一个元素定位。</p>

## Usage-用法

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

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

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

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

**注意** Drop组件没有默认样式。在此示例中，我们使用了 [Card 组件](card.md) 中的卡片。

```example
<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 in drop-下拉组件中的网格

可以将 [Grid 组件](grid.md) 的网格放置在下拉组件中。 只需用 `<div>` 元素包装内容并添加 `uk-grid` 属性。 当下拉组件的尺寸不适应父容器的尺寸，网格需要自动堆叠的话，则只要添加 `.uk-drop-grid` class。

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

使用 [Width 组件](width.md) 来调整下拉组件的宽度。

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

***

## Position-定位

将以下选项之一添加到 `uk-drop` 属性的值中来调整下拉组件的对齐方式。

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

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

| 定位         | 描述                                                                   |
|:-----------------|:------------------------------------------------------------------------------|
| `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-边界

默认情况下，下拉菜单超出视口的边缘时会自动翻转。 如果想要根据容器的边界翻转， 只需将 `boundary: .my-class` 选项添加到 `uk-drop` 属性内, 并添加指向容器的选择器。这样就能将任意父元素设定为下拉组件的边界了。

```html
<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: .my-class"></div>
</div>
```

```example
<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` 选项添加到属性中。

```html
<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: .my-class; boundary-align: true"></div>
</div>
```

```example
<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-偏移量

若要在放置容器和切换之间定义自定义偏移距离，请添加 `offset` 和偏移值（单位为像素）。

```html
<div uk-drop="offset: 80"></div>
```

```example
<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.md) 中的 `animation: uk-animation-*` 选项之一的动画class，就能为下拉组件添加一个或多个动画，还能设置动画的持续时间，只需要将 `duration` 选项添加到值即可。

```html
<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>
```

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

***

## Component options-组件选项

下面这些选项中的任何一个都可以应用于下拉组件属性。多个选项之间请用分号分隔。 [了解更多](javascript.md#component-configuration)

| 选项           | 可用值           | 默认值        | 描述                                                            |
|:-----------------|:----------------|:---------------|:---------------------------------------------------------------------------------------------------|
| `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`       | Boolean, String | `true`       | 维持下拉组件可见性的元素的CSS 选择器，默认值（true）就是它的窗口  |
| `boundary-align` | Boolean         | `false`        | 将下拉组件与它的边界对齐。  |
| `flip`           | Boolean, String | `true`         | 自动翻转下拉组件。可能的值有 `false`, `true`, `x` 或 `y` |
| `offset`         | Number          | `0`            | 下拉组件容器的偏移量。 |
| `animation`      | String          | `false`        | 要应用的动画名称以空格分隔。  |
| `duration`       | Number          | `200`          | 动画持续时间（以毫秒为单位）。    |

`pos` 是 _Primary_ 的选项，如果它是属性值中的唯一选项，则可以省略其键。

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

***

## JavaScript

了解更多 [JavaScript 组件](javascript.md#programmatic-use).

### Initialization／初始化

```js
UIkit.drop(element, options);
```

### Events／事件

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

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

### Methods／方法

组件可以使用以下方法:

#### 显示

```js
UIkit.drop(element).show();
```

显示下拉组件。

#### 隐藏

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

隐藏下拉组件。

| Name        | 类型    | 默认值 | 描述                      |
|:------------|:--------|:--------|:---------------------------------|
| `delay`     | Boolean | true    | 延迟隐藏下拉组件           |