Компонент Пагинация 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>
Выравнивание
Компонент Пагинация использует 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>
Доступность
Компонент «Предыдущая/Следующая нумерация страниц» придерживается шаблона Button Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
- Элементы пагинации prev/next имеют роль
button
и свойствоaria-label
.
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
label |
Next/Previous page |
aria-label атрибут. |
Подробнее о переводе компонентов.