Компонент Точечная навигация

Создание точечной навигации для работы со слайд-шоу или для прокрутки к различным разделам страницы.

Dotnav. Как сделать навигацию точками

Чтобы создать навигацию с точками, используйте следующие классы.

Класс Описание
.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>

Компонент Dotnav построен на Flexbox. Чтобы выровнять dotnav, вы можете использовать компонент Flex.


Вертикальное выравнивание точечной навигации

В UIkit 3 точечная навигация может быть выровнена и отображаться вертикально. Просто добавьте класс-модификатор .uk-dotnav-vertical и навигация примет вертикальное положение.

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

Позиция точечной навигации как наложение (оверлей)

Чтобы расположить точечную навигацию сверху на элементе или, например, в компоненте Слайд-шоу, добавьте один из классов .uk-position-* из компонента Позиционирование к элементу div, охватывающему dotnav. Чтобы создать контекст позиции в контейнере, добавьте класс .uk-position-relative.

Для лучшей видимости, используйте класс .uk-light или .uk-dark из компонента Инверсия, чтобы применить светлый или темный цвет.

<div class="uk-position-relative uk-light">

    <!-- Здесь находится охватываемый (оборачиваемый) элемент -->

    <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="/demo/img/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/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="#">Элемент 1</a></li>
                <li uk-slideshow-item="1"><a href="#">Элемент 2</a></li>
                <li uk-slideshow-item="2"><a href="#">Элемент 3</a></li>
            </ul>
        </div>
    </div>

Вертикально по центру внутри Viewport

Dotnav также можно центрировать вертикально внутри вашего viewport (видимое окно просмотра), добавив классы .uk-position-center-right и .uk-position-fixed из компонента Позиция. Это полезно для типичных одностраничных сайтов.

Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.

<div class="uk-position-center-right uk-position-medium uk-position-fixed">
    <ul class="uk-dotnav uk-dotnav-vertical">...</ul>
</div>
Документация
Компоненты