UIkit3.x文档

圆点导航（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>