Dropbar
创建一个可切换的、占据整个宽度的区域，称为下拉栏（dropbar）。
Dropbar 组件为 Drop 组件 提供了一种类似区块的样式。与可以定位在页面任意位置、四周留有间距的 dropdown 不同，下拉栏会延伸到视口的全部宽度或高度，因此可以无缝贴合视口的三条边缘。
下拉栏组件具备方向感知能力。这意味着只要鼠标指针朝下拉栏的方向移动，下拉栏就会保持打开。额外的延迟确保即使鼠标指针短暂地移向其他方向，下拉栏也依然保持打开。如果此时打开了另一个下拉栏，当前的下拉栏就会立即关闭。
用法
要使用该组件，请添加 .uk-dropbar 类，并添加用于指定下拉栏出现方向的修饰符类，例如 .uk-dropbar-top。
<div class="uk-dropbar uk-dropbar-top"></div>此外，还要为下拉栏添加 uk-drop 属性，并在它的前面放置一个切换元素。任何内容（例如按钮）都可以用来切换 drop 组件。由于下拉栏在视觉上需要延伸到视口的全部宽度或高度，请为 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><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">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Parent</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>请注意，Navbar 组件 和 Dropnav 组件 针对多个下拉栏的场景提供了专门的实现。
方向
要设置合适的下拉栏样式，请添加下列某个方向修饰符类。
| Direction | 说明 |
|---|---|
uk-dropbar-top |
从顶部打开下拉栏。 |
uk-dropbar-bottom |
从底部打开下拉栏。 |
uk-dropbar-left |
从左侧打开下拉栏。 |
uk-dropbar-right |
从右侧打开下拉栏。 |
要从特定方向打开下拉栏，请使用 Drop 组件 中的 pos 和 stretch 选项。
| Position | 说明 |
|---|---|
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>动画
要为下拉栏添加动画，请使用 Drop 组件 中的 slide-* 或 reveal-* 动画。slide-* 动画会让下拉栏及其内容从指定的方向滑入，而在 reveal-* 动画中，下拉栏的内容保持静止不动，从指定的方向逐渐显露出来。设置 animate-out: true 可以在关闭下拉栏时也显示动画。
| Animation | 说明 |
|---|---|
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>下拉栏中的导航
下拉栏可以包含 Nav 组件 中的导航。只需为 <ul> 元素添加 .uk-nav 类，并使用 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">
<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>可访问性
Drop 组件遵循 Menu Button WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 角色、状态和属性。
- toggle 具有
button角色、aria-expanded状态和aria-haspopup属性。
键盘交互
Drop 组件可以通过以下按键使用键盘访问。
- enter 或 space 键用于打开和关闭 drop。
- esc 键用于关闭 drop，即使焦点已经移到其他元素上也是如此。