下拉菜单／Dropdown

# 下拉菜单／Dropdown

<p class="uk-text-lead">为可切换的下拉菜单定义不同的样式。</p>

## Usage-用法

从根本上说， 下拉菜单其实是 [drop](drop.md) 一种特殊情况，它提供了自己的样式。任何内容（例如按钮）都可以切换下拉菜单。只需为拨动器后面的块元素添加 `uk-dropdown` 属性即可。

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

可以通过悬停并单击切换来启用下拉菜单。 只需在属性中添加 `mode: click` 选项即可强制使用 `click` 模式。 如果要对切换和下拉列表进行分组，则只需将 [Utility 组件](utility.md#inline) 中的 `.uk-inline` class 添加到其外包围的容器元素中。

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

```example
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div uk-dropdown>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 uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
```

***

## Nav in dropdown-下拉列表中的导航菜单

下拉列表可以包含来自 [Nav 组件](nav.md)中的导航。只需将 `.uk-nav`  class 和 `.uk-dropdown-nav` 修饰符添加到 `<ul>` 元素即可。

```html
<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
```

```example
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

***

## Grid in dropdown-下拉菜单中的网格

可以在下拉菜单中使用 [Grid 组件](grid.md) ， 在网格中可以添加导航或者其他内容。只需用 `<div>` 元素包裹内容并为div添加 `uk-grid` 属性。 如果在下拉菜单的尺寸不适应容器的尺寸，需要自动堆叠网格的话，需要添加 `.uk-dropdown-grid` class。

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

可使用 [Width 组件](width.md) 中的class的几分之一来调整下拉菜单的宽度。

```example
<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-width-large" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>
```

***

## Position-定位

将以下选项之一添加到 `uk-dropdown` 属性以调整下拉列表的对齐方式。

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

```example
<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="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
    <div uk-dropdown="pos: bottom-justify">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</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="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </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-边界

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

```html
<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="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-dropdown="boundary: .boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Hover</button>
    <div uk-dropdown="boundary: .boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>
```

***

### 边界对齐

您还可以将下拉列表与其边界对齐。要实现这个效果，需要将 `boundary-align: true` 选项添加到属性。

```html
<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="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-dropdown="pos: bottom-justify; boundary: .boundary-align; boundary-align: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Center</button>
    <div uk-dropdown="pos: bottom-center; boundary: .boundary-align; boundary-align: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>
```

***

## Offset-偏移量

如果想自定义下拉菜单容器与拨动器之间的偏移距离，需要添加带偏移数值的 `offset` 选项（以像素为单位）。

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

```example
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="offset: 80">
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

***

## Animation-动画

添加 [Animation 组件](animation.md) 中的 `animation: uk-animation-*` 选项， 就能为下拉菜单添加一个或多个动画。还能设置动画的持续时间，添加带值的 `duration` 选项就行，如下方示例。

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

```example
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000">
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</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`       | String          | `window`       | 维持下拉组件可见性的元素的CSS 选择器 |
| `boundary-align` | Boolean         | `false`        | 将下拉组件与它的边界对齐  |
| `flip`           | Boolean, String | `true`         | 自动翻转下拉组件。可能的值有e `false`, `true`, `x` 或 `y`  |
| `offset`         | Number          | `0`            | 下拉组件容器的偏移量   |
| `animation`      | String          | `false`        | 要应用的动画名称，多个动画以空格分隔。  |
| `duration`       | Number          | `200`          | 动画持续时间（以毫秒为单位）|

***

## JavaScript

了解有关 [JavaScript 组件](javascript.md#programmatic-use)的更多信息

### Initialization／初始化

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

### Events／事件

将在附加了此组件的元素上触发以下事件:

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

### Methods／方法

以下方法可用于下拉组件:

#### 显示

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

显示下拉菜单。

#### 隐藏

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

隐藏下拉菜单。

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