Materialize CSS Pagination

—

by

in 02. Components

Pagination is used to split out your long pages into shorter, easier to understand blocks. It is used to link the small pages on a single home page.

The pagination class is used to add pagination in Materialize CSS.

pagination: It is used to set the ul element as a pagination component.

Example

<html>  

   <head>  

      <title>The Materialize Pagination Example</title>  

      <meta name = "viewport" content = "width = device-width, initial-scale = 1">        

      <link rel = "stylesheet"  

         href = "https://fonts.googleapis.com/icon?family=Material+Icons">  

      <link rel = "stylesheet"  

         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">  

      <script type = "text/javascript"  

         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>  

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">  

      </script>  

   </head>  

     

   <body class = "container">   

      <div class = "row" style = "width:560px;">  

         <div class = "col s12 m12 l12" >  

            <h5>Materialize Pagination Example</h5>  

            <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 = "#!">5</a></li>  

               <li class = "waves-effect"><a href = "#!">  

                  <i class = "material-icons">chevron_right</i></a></li>  

            </ul>  

         </div>  

      </div>        

   </body>    

</html>

Output:

Materialize Pagination 1

Comments

Leave a Reply Cancel reply