圆点导航／Dotnav

创建一个圆点导航来操作幻灯片显示或滚动到页面的不同部分。

用法

要创建圆点导航，请使用以下class。该组件使用Flexbox构建，因此要对齐圆点导航，可以使用 Flex 组件。

Class 描述
.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="/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/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 class，可以将圆点导航在视口内垂直居中，这对于单页网站非常有用。

<div class="uk-position-center-right uk-position-medium uk-position-fixed">
    <ul class="uk-dotnav uk-dotnav-vertical">...</ul>
</div>

上一篇： Divider

下一篇： Drop

dotnav.md

# 圆点导航／Dotnav

<p class="uk-text-lead">创建一个圆点导航来操作幻灯片显示或滚动到页面的不同部分。</p>

## Usage-用法

要创建圆点导航，请使用以下class。该组件使用Flexbox构建，因此要对齐圆点导航，可以使用 [Flex 组件](flex.md)。

| Class         | 描述                                                                                         |
|:--------------|:--------------------------------------------------------------------------------------------|
| `.uk-dotnav`  | 添加这个class到 `<ul>` 元素中以定义Dotnav组件。使用 `<a>` 元素作为列表中的导航项。 |
| `.uk-active ` | 将这个class添加到列表项，应用活动状态。|                                                         |

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

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

***

## Vertical alignment-垂直对齐

圆点导航也可以垂直显示。只需添加 `.uk-dotnav-vertical` 类即可。

```html
<ul class="uk-dotnav uk-dotnav-vertical">...</ul>
```

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


***

## Position as overlay-遮罩定位

要将圆点导航定位在某个元素或 [Slideshow 组件](slideshow.md) 的上面， 请将 [Position 组件](position.md)中的 `.uk-position-*` class添加到包裹圆点导航的 `div`  元素中。 要在容器上创建位置上下文，请添加 `.uk-position-relative` class。

使用 [Inverse 组件](inverse.md) 中的`.uk-light` 或 `.uk-dark` class 可以应用浅色或深色以获得更好的可见性。

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

```example
<div class="uk-position-relative uk-light" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="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>
```

***

## Vertically center in viewport-在视口中垂直居中

从[Position 组件](position.md) 添加`.uk-position-center-right` 和 `.uk-position-fixed` class，可以将圆点导航在视口内垂直居中，这对于单页网站非常有用。

```html
<div class="uk-position-center-right uk-position-medium uk-position-fixed">
    <ul class="uk-dotnav uk-dotnav-vertical">...</ul>
</div>
```