Точечная навигация

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

Как использовать компонент Dotnav в UIkit 3. Все о точечной навигации

Для создания точечной навигации используйте следующие классы:

Класс Описание
.uk-dotnav Добавьте этот класс к элементу <ul> для активации компонента. Используйте элементы <a> для элементов списка.
.uk-active Этот класс добавляет элементу активное состояние.

Компонент основан на Flexbox, поэтому вы можете применять к нему любые настройки из компонента Flex. В данном примере мы добавим точечную навигацию и используем класс uk-flex-center:

<ul class="uk-dotnav uk-flex-center">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

  • <ul class="uk-dotnav uk-flex-center">
    <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>

Позиция над элементами

Для размещения точек на над элементом используйте один из классов семейства .uk-position-* компонента Position, где можете выбрать любой вариант расположения своих точек. В качестве примера возьмем компонент Slideshow и добавим в него точечную навигацию. Сначала создадим элемент div и добавим ему класс .uk-position-relative. Затем поместим в него нашу навигацию. Заодно добавим класс .uk-light или .uk-dark из компонента Инверсия для улучшения восприятия:

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

    <!-- Навигационные точки, обернутые в relative -->

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

Вертикальное центрирование в области просмотра

Можно отцентрировать точечную навигацию в окне просмотра с помощью классов .uk-position-center-right или .uk-position-fixed из компонента Position. Типичная тема для одностраничников.

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