Materializar paginación CSS

La paginación se utiliza para separar el contenido en páginas discretas que son cortas y fáciles de entender. Materialise CSS proporciona clases para crear una barra de paginación que contiene los enlaces a las otras páginas.

La clase de paginación se usa para establecer el elemento de lista <ul> como un componente de paginación. Las páginas que deben mostrarse se definen dentro de este componente como elementos <li>. Se puede usar un icono de flecha izquierda y derecha para mostrar los botones para pasar a la página siguiente o anterior.

Sintaxis:

<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>

Ejemplo:

HTML

<html>
  
<head>
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
  
    <!-- Import Material Icon Fonts -->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
  
    <!-- Include Compiled and minified 
        Materialize CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
    <!-- Include jQuery -->
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!-- Compiled and minified 
        Materialize JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </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>

Producción:

Publicación traducida automáticamente

Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta