圆点导航

创建水平或垂直布局的圆点导航，通过幻灯片或者滚动的方式导航到页面的不同部分。

用法

创建带有圆点的导航，只需要添加 .uk-dotnav 类到 <ul> 元素中，再将 <a> 元素嵌套进列表即可。于是，完美地创建咯一个典型的幻灯片导航。这个组件使用Flex进行构建，所以，你可以使用 Flex 调整圆点导航。注意 使用此组件需要额外添加 dotnav.css 文件，在css/components文件夹中。

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Markup

<ul class="uk-dotnav">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

圆点导航与图片

为了能在图片上有更好的可见性，比如使用圆点导航作为幻灯片的导航时，只需要添加 .uk-dotnav-contrast 类。

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

注意 在这个例子中，我们还用了Flex 组件 中的.uk-flex-center类来居中圆点导航。

Markup

<ul class="uk-dotnav uk-dotnav-contrast uk-flex-center">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

垂直的圆点导航

圆点导航可以垂直对齐。只需添加 .uk-flex-column 类即可。这对于使用 滚动监听 进行页面滚动导航是非常有用的。

Example

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Markup

<ul class="uk-dotnav uk-flex-column">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>