Pagination
Easlily create a nicely looking pagination to navigate through pages.
Usage
The Pagination component consists of button-like styled links, that are aligned side by side.
| Class | Description |
|---|---|
.uk-pagination |
Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list. |
.uk-active |
Add this class to a list item to apply an active state and use a <span> instead of an <a> element. |
.uk-disabled |
Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element. |
To apply an ellipsis without any styling, just use a <span> element instead of an <a> element.
Example
Markup
<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>Alignment modifiers
Add the .uk-pagination-left or .uk-pagination-right class to the pagination to align it left or right.
Example
Markup
<ul class="uk-pagination uk-pagination-left">
<li>...</li>
</ul><ul class="uk-pagination uk-pagination-right">
<li>...</li>
</ul>Previous and next
Creating a simple previous and next pagination is very easy. Just add the .uk-pagination-previous or .uk-pagination-next class to a <li> element to align previous and next buttons left or right.
Example
Markup
<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>Pagination with icons
Enhance your pagination with icons from the Icon component by adding one of the .uk-icon-* classes to an <i> or <span> element within a pagination link.
Example
Markup
<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
You can apply the additional Dynamic Pagination component to automatically calculate the pages, for example to trigger an event to load new items dynamically in Ajax powered list views.
