UIkit3.x文档

下拉菜单

为可切换的下拉菜单定义不同的样式。

用法

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

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

可以通过鼠标悬停和鼠标点击来触发下拉菜单，为属性添加 mode: click 选项启用点击模式。如果要将拨动器和下拉列表进行分组，则只需将Utility 组件中的.uk-inline class添加到它们外围的容器中即可。 

<div class="uk-inline">
    <button type="button"></button>
    <div uk-dropdown="mode: click"></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="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 组件中的导航。只需将 .uk-nav class 和 .uk-dropdown-nav 修饰符添加到 <ul> 元素即可。 

<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
  • <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 组件， 在网格中可以添加导航或者其他内容。只需用<div> 元素包裹内容并为div添加uk-grid 属性。 如果在下拉菜单的尺寸不适应容器的尺寸，需要自动堆叠网格的话，需要添加 .uk-dropdown-grid class。 

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

使用 Width组件 中的class之一来调整下拉菜单的宽度。

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

定位

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

<div uk-dropdown="pos: top-left"></div>
  • <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>
Position Description
bottom-left 对齐到左下角
bottom-center 对齐到底部中间。
bottom-right A对齐到右下角
bottom-justify 对齐到底部，并将宽度调整为关联元素的宽度
top-left 对齐到左上角。
top-center 对齐到顶部中间
top-right 对齐到右上角
top-justify 对齐到顶部，并将宽度调整为关联元素的宽度。
left-top 对齐到左侧顶部。
left-center 对齐到左侧中间。
left-bottom 对齐到左侧底部。
right-top 对齐到右侧顶部。
right-center 对齐到右侧中间。
right-bottom 对齐到右侧底部。

边界

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

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: .my-class"></div>
</div>
  • <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 选项添加到属性。

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: .my-class; boundary-align: true"></div>
</div>
  • <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选项（以像素为单位）。

<div uk-dropdown="offset: 80"></div>
  • <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: uk-animation-* 选项， 就能为下拉菜单添加一个或多个动画。还能设置动画的持续时间，添加带值的 duration 选项就行，如下方示例。

<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"></div>
  • <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>

组件选项

以下选项中的任意之一都可以应用于组件属性。如含有多个选项，那么它们之间应该使用分号分隔。了解更多。

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 动画持续时间（以毫秒为单位）。
***      

JavaScript

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

初始化

UIkit.dropdown(element, options);

事件

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

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

方法

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

显示

UIkit.dropdown(element).show();

显示下拉菜单。

隐藏

UIkit.dropdown(element).hide();

隐藏下拉菜单。