UIkit3.x文档

下拉杆

创建一个命名为dropbar的可切换的全宽区块。

dropbar为 Drop组件提供了类似剖面的样式。和dropdown（下拉菜单）不同的是，dropbar将延伸到视口的整个宽度或高度，因此它完全适应三条边缘，并且不带间距。

Dropbar组件具有目标感知功能。这意味着只要将鼠标移到Dropbar，Dropbar就会保持打开状态。Dropbar的打开状态具有的延迟效果，即使鼠标短暂移离Dropbar，Dropbar也不会立即关闭。但如果打开了另一个Dropbar，那么上一个Dropbar就会关闭。

用法

要使用此组件，请添加.uk-dropbar class并为dropbar添加一个位置的修饰class，例如 .uk-dropbar-top。 

<div class="uk-dropbar uk-dropbar-top"></div>

另外，将uk-drop属性添加到dropbar前面的toggle切换元素。任何内容（例如按钮）都可以切换drop组件。由于dropbar在视觉上需要扩展到视口的全部宽度或高度，因此需要在uk-drop属性中添加stretch: true选项。若要仅拉伸到其中一个轴，请使用 stretch:x或stretch: y 。要了解所有动画效果，请查看 Drop 组件。

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div>
  • Lorem ipsum dolor sit amet， consectetur adipiscing elit， sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam， quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • <div class="uk-overflow-auto uk-height-medium">
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Hover</button>
        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
</div>

下拉栏通常与navbar组件一起使用。

注意，导航栏组件和 Dropnav 组件中有一个针对多个下拉栏的专用实现。

方向

若要设置dropbar的样式，请添加下面的方向修饰class之一。

方向 描述
uk-dropbar-top 从顶部展开下拉杆。
uk-dropbar-bottom 从底部展开下拉杆。
uk-dropbar-left 从左侧展开下拉杆。
uk-dropbar-right 从右侧展开下拉杆。

要从特定方向展开dropbar，请使用 Drop 组件中的 pos 和 stretch 选项。

位置 描述
pos: top-left; stretch: x 将dropbar置于切换开关上方并水平拉伸。
pos: bottom-left; stretch: x 将dropbar定位在切换开关下方并水平拉伸
pos: left-top; stretch: y 将dropbar定位到切换开关的左侧，并垂直拉伸
pos: right-top; stretch: y 将dropbar定位到切换开关的右侧，并垂直拉伸 
<div class="uk-dropbar uk-dropbar-left" uk-drop="pos: left-top; stretch: y"></div>

动画

要对dropbar添加动画效果，请使用 Drop 组件中的 slide-*或 reveal-*动画。slide-*动画从选定方向滑动dropbar及其内容，而在reveal-*动画中，dropbar的内容保持静态并从选定方向显示。设置为animate-out:true将在关闭dropbar时也显示动画。

动画 描述
slide-top 从顶部滑出
slide-bottom 从底部滑出
slide-left 从左侧滑出
slide-right 从右侧滑出
reveal-top 从顶部展开
reveal-bottom 从底部展开
reveal-left 从左侧展开
reveal-right 从右侧展开 
<div uk-drop="animation: slide-top; animate-out: true"></div>

dropbar可以包含来自Nav组件的导航。只需将.uk-navclass添加到<ul>元素，然后使用 Dropdown组件中相同的.uk-dropdown-nav修饰符即可具有相同的导航样式。

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
  • <div class="uk-overflow-auto uk-height-large">
    <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-dropbar uk-dropbar-top" uk-drop="stretch: x">
                        <ul class="uk-nav uk-navbar-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>
                </li>
            </ul>

        </div>
    </nav>
</div>

添加大的pdding

添加.uk-dropbar-largeclass可以为dropbar在垂直方向添加较大padding。

<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"></div>
  • <div class="uk-overflow-auto uk-height-large">
    <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-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x">
                        <ul class="uk-nav uk-navbar-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>
                </li>
            </ul>

        </div>
    </nav>
</div>

可访问性

拖放组件遵循菜单按钮（Menu Button） WAI-ARIA 设计模式，并自动设置适当的 WAI-ARIA 功能、状态和属性。

Drop组件遵循菜单按钮WAI-ARIA设计模式，并自动设置适当的WAI-ARI的作用、状态和属性。

  • toggle具有button功能、aria-expanded和aria-haspopup属性。

键盘交互

可以使用以下键盘按键操控Drop组件。

  • enter 或 space 可以打开和关闭 drop。
  • esc 键关闭drop，即使焦点已经移动到另一个元素。