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

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

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. 

<ul class="uk-dotnav">
    <li class="uk-active"><a href="#">Элемент 1</a></li>
    <li><a href="#">Элемент 2</a></li>
    <li><a href="#">Элемент 3</a></li>
    <li><a href="#">Элемент 4</a></li>
    <li><a href="#">Элемент 5</a></li>
</ul>

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

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

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

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

<ul class="uk-dotnav uk-dotnav-vertical">
    <li class="uk-active"><a href="#">Элемент 1</a></li>
    <li><a href="#">Элемент 2</a></li>
    <li><a href="#">Элемент 3</a></li>
    <li><a href="#">Элемент 4</a></li>
    <li><a href="#">Элемент 5</a></li>
</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>
	
    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo/photo-01.webp" loading="lazy" alt="Слайд-шоу" uk-cover>
        </div>
        <div>
            <img src="images/photo/photo-02.webp" loading="lazy" alt="Слайд-шоу" uk-cover>
        </div>
        <div>
            <img src="images/photo/photo-03.webp" loading="lazy" alt="Слайд-шоу" uk-cover>
        </div>
    </div>
    
    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-dotnav uk-slideshow-nav">
            <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 из компонента Позиция. Это полезно для типичных одностраничных сайтов. 

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

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