圆点导航（Dotnav）
创建一个圆点导航来操作幻灯片显示或滚动到页面的不同部分。
用法
要创建圆点导航，请使用以下class。该组件使用Flexbox构建，因此要对齐圆点导航，可以使用 Flex 组件。
| Class | Description |
|---|---|
.uk-dotnav |
添加这个class到 <ul> 元素中以定义Dotnav组件。使用
<a>元素作为列表中的导航项。
|
.uk-active |
将这个class添加到列表项，应用活动状态。 |
<ul class="uk-dotnav">
<li class="uk-active"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
-
<ul class="uk-dotnav"> <li class="uk-active"><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>
垂直对齐
圆点导航也可以垂直显示。只需添加 .uk-dotnav-vertical 类即可。.
<ul class="uk-dotnav uk-dotnav-vertical">...</ul>
-
<ul class="uk-dotnav uk-dotnav-vertical"> <li class="uk-active"><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>
遮罩定位
要将圆点导航定位在某个元素或Slideshow 组件 的上面， 请将Position
组件中的.uk-position-*class之一添加到包裹圆点导航的div 元素中。
要在容器上创建位置上下文，请添加 .uk-position-relative class。
使用Inverse 组件中的 .uk-light 或 .uk-dark
class 可以应用浅色或深色以获得更好的可见性。
<div class="uk-position-relative uk-light">
<!-- The element which is wrapped goes here -->
<div class="uk-position-bottom-center uk-position-small">
<ul class="uk-dotnav">...</ul>
</div>
</div>
-
<div class="uk-position-relative uk-light" uk-slideshow> <ul class="uk-slideshow-items"> <li> <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover> </li> <li> <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover> </li> <li> <img src="/skin/ukv3/images/size1.jpg" alt="" uk-cover> </li> </ul> <div class="uk-position-bottom-center uk-position-small"> <ul class="uk-dotnav"> <li uk-slideshow-item="0"><a href="#">Item 1</a></li> <li uk-slideshow-item="1"><a href="#">Item 2</a></li> <li uk-slideshow-item="2"><a href="#">Item 3</a></li> </ul> </div> </div>
在视口中垂直居中
从Position 组件添加 .uk-position-center-right 和
.uk-position-fixed 类，可以将圆点导航在视口内垂直居中，这对于单页网站非常有用。
<div class="uk-position-center-right uk-position-medium uk-position-fixed">
<ul class="uk-dotnav uk-dotnav-vertical">...</ul>
</div>