Компонент Пагинация 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>

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

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

Компонент Пагинация использует 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="#">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>
  • <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> Предыдущая</a>
    </li>
    <li class="uk-margin-auto-left">
    	<a href="#">Следующая <span class="uk-margin-small-left" uk-pagination-next></span></a>
    </li>
</ul>
  • <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>

Доступность

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

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

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

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

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

Pagination