Пагинация

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

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

Компонент Пагинация состоит из ссылок в стиле кнопок, которые выровнены в формате горизонтального списка.

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

  • <ul class="uk-pagination" uk-margin>
    <li><a href="#"><span uk-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="uk-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">20</a></li>
    <li><a href="#"><span uk-pagination-next></span></a></li>
</ul>

Выравнивание

Компонент разбивки на страницы использует flexbox, поэтому навигация может быть легко выровнена с помощью компонента Flex.

<ul class="uk-pagination uk-flex-center">...</ul>

  • <ul class="uk-pagination uk-flex-center" uk-margin>
    <li><a href="#"><span uk-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="uk-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#"><span uk-pagination-next></span></a></li>
</ul>

<ul class="uk-pagination uk-flex-right uk-margin-medium-top" uk-margin>
    <li><a href="#"><span uk-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="uk-active"><span>7</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#"><span uk-pagination-next></span></a></li>
</ul>

Предыдущий и следующий

Чтобы добавить кнопки предыдущих и следующих страниц, добавьте атрибут uk-pagination-previous или uk-pagination-next к элементу <span> элемент внутри элемента нумерации страниц.

<ul class="uk-pagination">
    <li><a href=""><span uk-pagination-previous></span></a></li>
    <li><a href=""><span uk-pagination-next></span></a></li>
</ul>

  • <ul class="uk-pagination">
    <li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
    <li class="uk-margin-auto-left"><a href="#">Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul>