UIkit3.x文档

下拉杆

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

dropbar为 Drop组件提供了类似区段的样式。和dropdown不同的是，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组件一起使用。

  • <div class="uk-overflow-auto uk-height-medium">
    <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">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>
                </li>
                <li>
                    <a href="#">Click</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">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>
                </li>
            </ul>

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

方向

若要设置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>
  • <div class="uk-overflow-auto uk-height-medium">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container">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>
                </li>
                <li>
                    <a href="#">Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
            </ul>

        </div>
    </nav>
</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>
  • <div class="uk-overflow-auto uk-height-medium">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Slide Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: slide-top; animate-out: true; duration: 700">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>
                </li>
                <li>
                    <a href="#">Reveal Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: reveal-top; animate-out: true; duration: 700">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>
                </li>
                <li>
                    <a href="#">Slide Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Reveal Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Slide Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: slide-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Reveal Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: reveal-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
            </ul>

        </div>
    </nav>
</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>

大修饰符

添加.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>