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
`.f-pagination`	Add this class to a `<ul>` element to define the Pagination component. Use `<a>` elements as pagination items within the list.
`.f-active`	Add this class to a list item to apply an active state and use a `<span>` instead of an `<a>` element.
`.f-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="f-pagination">
	<li><a href="">...</a></li>
	<li class="f-active"><span>...</span></li>
	<li class="f-disabled"><span>...</span></li>
	<li><span>...</span></li>
</ul>

Alignment modifiers

Add the .f-pagination-left or .f-pagination-right class to the pagination to align it left or right.

Example

Markup

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

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

Previous and next

Creating a simple previous and next pagination is very easy. Just add the .f-pagination-previous or .f-pagination-next class to a <li> element to align previous and next buttons left or right.

Example

Markup

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

Pagination with icons

Enhance your pagination with icons from the Icon component by adding one of the .f-icon-* classes to an <i> or <span> element within a pagination link.

Example

Markup

<ul class="f-pagination">
	<li><a href=""><i class="material-icons">first_page</i></a></li>
	<li class="f-active"><span><i class="material-icons">chevron_left</i></span></li>
	<li class="f-disabled"><span><i class="material-icons">chevron_left</i></span></li>
	<li><span>...</span></li>
	<li class="f-disabled"><span><i class="material-icons">chevron_right</i></span></li>
	<li class="f-active"><span><i class="material-icons">chevron_right</i></span></li>
	<li><a href=""><i class="material-icons">last_page</i></a></li>
</ul>

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.