下拉栏
创建一个可切换的全宽部分，称为下拉栏。
下拉栏组件为下拉组件提供了一个类似部分的样式。与放置在页面上任意位置并周围有空间的下拉菜单相反，下拉栏会扩展到视口的完整宽度或高度，因此它完美地贴合三个边缘而没有间距。
下拉栏组件是目标感知的。这意味着只要鼠标指针朝下拉栏移动，下拉栏就会保持打开状态。额外的延迟确保即使鼠标指针短暂地朝另一个方向移动，下拉栏也保持打开状态。如果打开另一个下拉栏，则下拉栏会立即关闭。
用法
要应用此组件，请添加 .uk-dropbar 类，并添加一个修饰符类来指定下拉栏出现的方向，例如 .uk-dropbar-top。
<div class="uk-dropbar uk-dropbar-top"></div>此外，请将 uk-drop 属性添加到下拉栏，并在之前添加一个切换元素。任何内容（如按钮）都可以切换下拉组件。由于下拉栏在视觉上需要扩展到视口的完整宽度或高度，请将 stretch: true 选项添加到 uk-drop 属性。要仅沿一个轴拉伸，请使用 stretch: x 或 stretch: y。有关所有动画的详细信息，请查看下拉组件。
<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div><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>
下拉栏通常与导航栏组件一起使用。
<div class="uk-overflow-auto uk-height-medium">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></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>
</ul>
</div>
</div>
</div>
</nav>
</div>请注意，在导航栏组件和下拉导航组件中，有针对多个下拉栏的专门实现。
方向
要设置适当的下拉栏样式，请添加以下方向修饰符类之一。
| 方向 | 描述 |
|---|---|
uk-dropbar-top |
从顶部打开下拉栏。 |
uk-dropbar-bottom |
从底部打开下拉栏。 |
uk-dropbar-left |
从左侧打开下拉栏。 |
uk-dropbar-right |
从右侧打开下拉栏。 |
要从特定方向打开下拉栏，请使用下拉组件中的 pos 和 stretch 选项。
| 定位 | 描述 |
|---|---|
pos: top-left; stretch: x |
将下拉栏定位在切换元素上方，并水平拉伸。 |
pos: bottom-left; stretch: x |
将下拉栏定位在切换元素下方，并水平拉伸。 |
pos: left-top; stretch: y |
将下拉栏定位在切换元素的左侧，并垂直拉伸。 |
pos: right-top; stretch: y |
将下拉栏定位在切换元素的右侧，并垂直拉伸。 |
<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">
<div class="uk-container">
<div 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>
</div>
</div>
</nav>
</div>动画
要为下拉栏添加动画效果，请使用下拉组件中的 slide-* 或 reveal-* 动画。slide-* 动画将下拉栏及其内容从选定的方向滑动，而在 reveal-* 动画中，下拉栏的内容保持静态，并从选定的方向显示。设置 animate-out: true 也可以在关闭下拉栏时显示动画。
| 动画 | 描述 |
|---|---|
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">
<div class="uk-container">
<div 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>
</div>
</div>
</nav>
</div>下拉栏中的导航
下拉栏可以包含来自导航组件的导航。只需将 .uk-nav 类添加到 <ul> 元素，并使用来自下拉菜单组件的相同 .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">
<div class="uk-container">
<div 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>
</div>
</div>
</nav>
</div>大型修饰符
添加 .uk-dropbar-large 类，用于具有较大垂直内边距的下拉栏。
<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">
<div class="uk-container">
<div 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>
</div>
</div>
</nav>
</div>可访问性
下拉组件遵循菜单按钮 WAI-ARIA 设计模式，并自动设置适当的 WAI-ARIA 角色、状态和属性。
- 切换具有
button角色、aria-expanded状态和aria-haspopup属性。
键盘交互
可以使用以下按键通过键盘访问下拉组件。
- enter 或 space 键打开和关闭下拉。
- 即使焦点已移动到另一个元素，esc 键也会关闭下拉。