Пагинация

Easlily создать красиво смотреть разбиение на страницы для перемещения по страницам.

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

В Пагинации компонент состоит из кнопки-как оформлены ссылки, которые располагаются рядом друг с другом.

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

Применять Многоточие без укладки, просто используйте <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>
    <li><span>...</span></li>
</ul>

Выравнивание модификаторы

Добавить .uk-pagination-left или .uk-pagination-right класс пагинации, чтобы выровнять его влево или вправо.

Пример

Разметки

<ul class="uk-pagination uk-pagination-left">
    <li>...</li>
</ul>
<ul class="uk-pagination uk-pagination-right">
    <li>...</li>
</ul>

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

Создание простого предыдущая и следующая разбивка на страницы очень легко. Просто добавить .uk-pagination-previous или .uk-pagination-next класс <li> элемент для выравнивания предыдущей и следующей кнопки влево или вправо.

Пример

Разметки

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

Пагинация с иконки

Повысить пагинацию с иконки от Иконка компонент, добавив одну из предложенных .uk-icon-* классов <i> или <span> элемент в пагинации.

Пример

  • ...

Разметки

<li><a href=""><i class="uk-icon-angle-double-left"></i></a></li>
<li><a href=""><i class="uk-icon-angle-double-right"></i></a></li>

JavaScript

Вы можете применить дополнительное Динамическое разбиение на страницы компонента для автоматического расчета страниц, например, чтобы вызвать событие, чтобы загрузить новые предметы в динамически AJAX питанием списковых представлений.