Компонент Пагинация

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

Pagination: Создание

Руководство по использованию

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

Класс Описание
.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>

<nav aria-label="Пагинация">
    <ul class="uk-pagination" uk-margin>
        <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="#">25</a></li>
    </ul>
</nav>

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

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

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

<nav aria-label="Pagination">
    <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="#">18</a></li>
        <li><a href="#">19</a></li>
        <li class="uk-active"><span>20</span></li>
        <li><a href="#">21</a></li>
        <li><a href="#">22</a></li>
        <li class="uk-disabled"><span>...</span></li>
        <li><a href="#">40</a></li>
        <li><a href="#"><span uk-pagination-next></span></a></li>
    </ul>
</nav>
<nav aria-label="Pagination">
    <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>
</nav>

Назад - Вперед

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

Для добавления кнопок Предыдущая и Следующая или «Назад» и «Вперед», добавьте атрибут 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>

<nav>
    <ul class="uk-pagination">
        <li>
            <a href="#"><span class="uk-margin-xsmall-right" uk-pagination-previous></span> Предыдущая</a>
        </li>
        <li class="uk-margin-auto-left">
            <a href="#">Следующая <span class="uk-margin-xsmall-left" uk-pagination-next></span></a>
        </li>
    </ul>
</nav>
<nav>
    <ul class="uk-pagination uk-flex-center">
        <li>
            <a href="#">
                <span class="uk-margin-small-right" uk-pagination-previous></span> Назад
            </a>
        </li>
        <li>
            <a href="#">
                Вперед <span class="uk-margin-small-left" uk-pagination-next></span>
            </a>
        </li>
    </ul>
</nav>

Доступность

Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента Pagination.

  • Содержите список пагинации в элементе nav и установите свойство aria-label для описания типа предоставляемой навигации.
  • Установите свойство aria-current="page" для активного элемента.
<nav aria-label="Пагинация">
    <ul class="uk-pagination">…</ul>
</nav>

Пагинация предыдущей/следующей страницы придерживается шаблона Button Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Элементы пагинации prev/next имеют роль button и свойство aria-label.

Интернационализация

Компонент Pagination использует следующие строки перевода:
Ключ По умолчанию Описание
label Next/Previous page aria-label атрибут.

Подробнее о переводе компонентов.