创建一个命名为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>
<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 class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></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>
注意,导航栏组件和 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>
<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>
要对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">
<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>
dropbar可以包含来自Nav组件的导航。只需将.uk-nav
class添加到<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-large
class可以为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的作用、状态和属性。
button
功能、aria-expanded
和aria-haspopup
属性。可以使用以下键盘按键操控Drop组件。