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

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

Создание

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. Чтобы выровнять точечную навигацию, вы можете использовать компонент Flex.

Вертикальное выравнивание

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

В UIkit точечная навигация может быть выровнена и отображаться вертикально. Просто добавьте класс-модификатор .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

Вертикально по центру внутри 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>