Pagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages.
The pagination class is used to set the <ul> list element as a pagination component. The pages that have to be shown are defined inside this component as <li> items. A left and right arrow icon can be used to show the buttons for moving to the next or previous page.
Syntax:
<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="#!">
<i class="material-icons">
chevron_right
</i>
</a>
</li>
</ul>
Example:
HTML
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Import Material Icon Fonts -->
<link rel="stylesheet" href=
<!-- Include Compiled and minified
Materialize CSS -->
<link rel="stylesheet" href=
<!-- Include jQuery -->
<script type="text/javascript" src=
</script>
<!-- Compiled and minified
Materialize JavaScript -->
<script src=
</script>
</head>
<body>
<div class="card-panel">
<h3 class="center">
Pagination
</h3>
<!-- Use the pagination class -->
<ul class="pagination center-align">
<!-- Use icon inside list item
for the left arrow -->
<li class="disabled">
<a href="#!">
<i class="material-icons">
chevron_left
</i>
</a>
</li>
<!-- Various classes that can be
used with the page links -->
<li class="waves-effect">
<a href="#!">1</a>
</li>
<li class="active green">
<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="#!">5</a>
</li>
<!-- Use icon inside list item
for the right arrow -->
<li class="waves-effect">
<a href="#!">
<i class="material-icons">
chevron_right
</i>
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output: