Materialize CSS pagination is a process of splitting existing web pages into shorter blocks & every block is linked to a single page.
Steps To create a Materialize paginations:
.pagination
class to the pagination container i.e <ul>
base class.
<ul class="pagination"></ul>
<li>
) inside the pagination container i.e <ul>
.
<ul class="pagination">
<li class="waves-effect">
<a href="#!">Page Link</a>
</li>
</ul>
General Syntax
<ul class="pagination">
<li class="waves-effect">
<a href="#!">Page Link</a>
</li>
</ul>
Source Code
<div class="row">
<div class="col s12">
<ul class="pagination">
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect">
<a href="#!"><i class="material-icons">chevron_right</i></a>
</li>
</ul>
</div>
<!--/column-->
</div>
<!--/row-->
Source Code : Output
To create active pagination item, use the .active
class to the direct child element i.e <li> of pagination container
element class base class.
General Syntax
<ul class="pagination">
<li class="active"></li>
</ul>
Source Code
<ul class="pagination">
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
To create a disabled pagination item, simply assign the .disabled
class to the pagination's direct child element i.e <li>
element base class.
General Syntax
<ul class="pagination">
<li class="disabled"></li>
</ul>
Source Code
<ul class="pagination">
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
<li class="disabled"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect">
<a href="#!"><i class="material-icons">chevron_right</i></a>
</li>
</ul>
Materialize Pagination can be aligned in the horizontal direction along the x-axis through the text helper classes. Keep in mind that, pagination is by default left aligned.
To align the pagination in the center of the x-axis, use the .center-align
class.
General Syntax
<div class="center-align">
<ul class="pagination"> </ul>
</div>
Source Code
<div class="center-align">
<ul class="pagination">
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect">
<a href="#!"><i class="material-icons">chevron_right</i></a>
</li>
</ul>
</div>
To align the pagination in the right horizontally, use the .right-align
class.
General Syntax
<div class="right-align">
<ul class="pagination"></ul>
</div>
Source Code
<div class="right-align">
<ul class="pagination">
<li class="disabled">
<a href="#!"><i class="material-icons">chevron_left</i></a>
</li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect">
<a href="#!"><i class="material-icons">chevron_right</i></a>
</li>
</ul>
</div>