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