下拉栏
创建一个可切换的全宽部分，名为下拉栏。
下拉栏组件为下拉组件提供类似于部分的样式。与下拉菜单不同，下拉菜单可以在页面上的任何位置进行定位，并留有间距，下拉栏扩展到视窗的全宽或全高，因此它可以完美地贴合三条边，而无需间距。
下拉栏组件是目标感知的。这意味着只要鼠标指针移向下拉栏，下拉栏就会保持打开状态。额外的延迟确保即使鼠标指针短暂地移动到另一个方向，下拉栏也会保持打开状态。如果打开另一个下拉栏，则下拉栏会立即关闭。
用法
要应用此组件，请添加.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 键关闭下拉菜单，即使焦点已移至另一个元素。