跳至主要内容

文档

Dotnav

创建点导航以操作幻灯片或滚动到不同的页面部分。

用法

要创建带有点的导航，请使用以下类。 此组件使用 Flexbox 构建。 因此，要对齐 dotnav，您可以使用 Flex 组件。

类 描述
.uk-dotnav 将此类添加到 <ul> 元素以定义 Dotnav 组件。 在列表中使用 <a> 元素作为导航项目。
.uk-active 将此类添加到列表项以应用活动状态。 
<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>

垂直对齐

dotnav 也可以垂直显示。 只需添加 .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>

作为覆盖层定位

要将 dotnav 定位在元素或 幻灯片组件 之上，例如，请将 位置组件 中的 .uk-position-* 类之一添加到包含 dotnav 的 div 元素中。 要在容器上创建位置上下文，请添加 .uk-position-relative 类。

使用 反转组件 中的 .uk-light 或 .uk-dark 类来应用浅色或深色以获得更好的可见度。

<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>

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/size1.jpg" alt="" uk-cover>
        </div>
    </div>

    <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>

在视窗中垂直居中

dotnav 也可以通过添加 位置组件 中的 .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>