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>