Пагинация

Нумерация страниц. Создавайте красивую нумерацию страниц для навигации по страницам с указанием номеров текущей и соседней.

Использование

Компонент Pagination состоит из стилизованных ссылок в стиле кнопок, которые расположены рядом друг с другом.

Класс	Описание
`.uk-pagination`	Добавьте этот класс к элементу `<ul>`, чтобы определить компонент Pagination. Используйте тег `<a>` для нумерации страниц в списке.
`.uk-active`	Добавьте этот класс к элементу списка, чтобы применить активное состояние. Используйте тег `<span>` вместо элемента `<a>`.
`.uk-disabled`	Добавьте этот класс к элементу списка, чтобы применить отключенное состояние. Используйте тег `<span>` вместо элемента `<a>`.

Примечание Чтобы применить многоточие без какого-либо стиля, используйте элемент <span> вместо тега <a>.

Пример (Пагинация)

Разметка

<ul class="uk-pagination">
    <li class="uk-disabled">    <!-- Иконка назад, отключенное состояние -->
        <span><i class="uk-icon-angle-double-left"></i></span>
    </li>
    <li><a href="">.1.</a></li>
    <li><a href="">.2.</a></li>
    <li class="uk-active"><span>.3.</span></li>
    <li class="uk-disabled"><span>...</span></li>    <!-- Отключенное состояние -->
    <li><span>...</span></li>    <!-- Многоточие, отключенное состояние -->
    <li>    <!-- Иконка -->
        <a href="#"><i class="uk-icon-angle-double-right"></i></a>
    </li>
</ul>

Модификаторы выравнивания

Добавьте класс .uk-pagination-left или .uk-pagination-right к нумерации страниц, чтобы выровнять его влево или вправо.

Пример (Пагинация по левому краю)

Разметка

<ul class="uk-pagination uk-pagination-left">
    <li>...</li>
</ul>

Пример (Пагинация по правому краю)

Разметка

<ul class="uk-pagination uk-pagination-right">
    <li>...</li>
</ul>

Предыдущая и следующая

Создать нумерацию страниц с указателем на предыдущую или следующую страницу довольно просто. Добавьте класс .uk-pagination-previous или .uk-pagination-next к элементу <li>, чтобы выровнять предыдущую и следующую кнопки влево или вправо.

Пример

Разметка

<li class="uk-pagination-previous">
    <a href="">Предыдущая</a>
</li>

<li class="uk-pagination-next">
    <a href="">Следующая</a>
</li>

Нумерация страниц с иконами

Усовершенствуйте свою нумерацию страниц с помощью компонента Icon, добавив один из классов .uk-icon-* к элементу <i> или <span> в ссылке на нумерацию страниц.

Пример

Разметка

<!-- Рабочая ссылка -->
<li>
    <a href=""><i class="uk-icon-angle-double-left"></i></a>
</li>

<!-- Активное состояние -->
<li class="uk-active">
    <span><i class="uk-icon-angle-double-left"></i></span>
</li>

<!-- Отключенное состояние -->
<li class="uk-disabled">
    <span><i class="uk-icon-angle-double-left"></i></span>
</li>

<!-- Многоточие, отключенное состояние -->
<li>
    <span>...</span>
</li>

<!-- Рабочая ссылка -->
<li>
    <a href=""><i class="uk-icon-angle-double-right"></i></a>
</li>

JavaScript

Вы можете применить дополнительный компонент Dynamic Pagination для автоматического расчета страниц, например, чтобы инициировать событие для динамической загрузки новых элементов в представлении списка с поддержкой Ajax.