Las colecciones le permiten agrupar objetos de lista. Representa varios tipos de colección, es decir, un grupo de información relacionada.
Las siguientes son las diversas clases de colección que se utilizan para crear varios tipos de colección:
- Básico: en este caso, el contenedor div o ul como colección y el elemento a o li como elemento de colección.
<ul class="collection">
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
</ul>
- Enlace: Se utiliza para mostrar el artículo a o li como un artículo de colección activo.
<div class="collection">
<a href="#!" class="collection-item">Title</a>
<a href="#!" class="collection-item active green">Title</a>
<a href="#!" class="collection-item">Title</a>
<a href="#!" class="collection-item active green">Title</a>
</div>
- Cabecera: Se utiliza para que la colección tenga una cabecera.
<ul class="collection with-header">
<li class="collection-header">
<h4>First Names</h4></li>
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
<li class="collection-item">Title</li>
</ul>
- Contenido secundario: se utiliza para establecer el elemento a o li como encabezado de colección.
<ul class="collection with-header">
<li class="collection-header"><h4>First Names</h4></li>
<li class="collection-item"><div>Title
<a href="#!"
class="secondary-content"><i
class="material-icons">edit</i></a></div></li>
<li class="collection-item"><div>Title
<a href="#!"
class="secondary-content"><i
class="material-icons">edit</i></a></div></li>
<li class="collection-item"><div>Title
<a href="#!"
class="secondary-content"><i
class="material-icons">edit</i></a></div></li>
<li class="collection-item"><div>Title
<a href="#!"
class="secondary-content"><i
class="material-icons">edit</i></a></div></li>
</ul>
- Contenido de avatar: se utiliza para configurar el elemento a o li como un elemento de avatar.
<ul class="collection">
<li class="collection-item avatar">
<img src="gfg_200X200.png" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!"
class="secondary-content"><i
class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle">autorenew</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!"
class="secondary-content"><i
class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle green">build</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!"
class="secondary-content"><i
class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle red">cloud</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!"
class="secondary-content"><i
class="material-icons">grade</i></a>
</li>
</ul>
- Contenido descartable: se utiliza para permitir que los elementos de la colección se deslicen. Se utiliza sólo en dispositivos de pantalla táctil.
<ul class = "collection">
<li class = "collection-item dismissable">Title</li>
<li class = "collection-item dismissable">Title</li>
<li class = "collection-item dismissable">Title</li>
<li class = "collection-item dismissable">Title</li>
</ul>
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="card-panel"> <h3>Basic Collection</h3> <ul class="collection"> <li class="collection-item">Title</li> <li class="collection-item">Title</li> <li class="collection-item">Title</li> <li class="collection-item">Title</li> </ul> </div> <div class="card-panel"> <h3>Collection with Links</h3> <div class="collection"> <a href="#!" class="collection-item">Title</a> <a href="#!" class="collection-item active green"> Title</a> <a href="#!" class="collection-item">Title</a> <a href="#!" class="collection-item active green"> Title</a> </div> </div> <div class="card-panel"> <h3>Collection with Hearder</h3> <ul class="collection with-header"> <li class="collection-header"> <h4>First Names</h4> </li> <li class="collection-item">Title</li> <li class="collection-item">Title</li> <li class="collection-item">Title</li> <li class="collection-item">Title</li> </ul> </div> <div class="card-panel"> <h3>Collection with Secondary Content</h3> <ul class="collection with-header"> <li class="collection-header"> <h4>First Names</h4></li> <li class="collection-item"> <div> Title<a href="#!" class="secondary-content green-text"> <i class="material-icons">send</i></a> </div> </li> <li class="collection-item"> <div> Title<a href="#!" class="secondary-content green-text"> <i class="material-icons">send</i></a> </div> </li> <li class="collection-item"> <div> Title<a href="#!" class="secondary-content green-text"> <i class="material-icons">send</i></a> </div> </li> <li class="collection-item"> <div> Title<a href="#!" class="secondary-content green-text"> <i class="material-icons">send</i></a> </div> </li> </ul> </div> <div class="card-panel"> <h3>Collection with Avatar Content</h3> <ul class="collection"> <li class="collection-item avatar"> <img src="gfg_200X200.png" alt="" class="circle" /> <span class="title">Title</span> <p> First Line <br /> Second Line </p> <a href="#!" class="secondary-content green-text"> <i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle">autorenew</i> <span class="title">Title</span> <p> First Line <br /> Second Line </p> <a href="#!" class="secondary-content green-text"> <i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle green"> build </i> <span class="title">Title</span> <p> First Line <br /> Second Line </p> <a href="#!" class="secondary-content green-text"> <i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle red"> cloud </i> <span class="title">Title</span> <p> First Line <br /> Second Line </p> <a href="#!" class="secondary-content green-text"> <i class="material-icons">grade</i></a> </li> </ul> </div> <div class="card-panel"> <h3>Collection with dismissible content</h3> <ul class="collection"> <li class="collection-item dismissable">Title</li> <li class="collection-item dismissable">Title</li> <li class="collection-item dismissable">Title</li> <li class="collection-item dismissable">Title</li> </ul> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
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