Materialize CSS Pagination
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:
Please Login to comment...