Motivação

Listas, em páginas web, são utilizadas para diversos fins, desde a simples exibição de dados organizados em sequência, até a construção de menus para permitir ao usuário navegar entre as seções de uma página ou site. Sendo assim, tendo em vista a importância desses elementos, estilizá-los é fundamental para garantir ao usuário final uma interface agradável e, consequentemente, uma melhor experiência de uso.

Nesse artigo veremos como aplicar estilos a listas (ou coleções) utilizando o framework Materialize, que dispõe de classes com as quais é possível formatar as coleções de itens de forma elegante e moderna.

Coleção básica no Materialize

Para utilizar os estilos do Materialize é necessário referenciar seu arquivo CSS, seja por meio da sua CDN (Content Delivery Network), seja baixando o arquivo e o incluindo localmente no projeto. Nos dois casos, é necessário incluir a tag <link> no cabeçalho da página apontando para esse arquivo. Por exemplo, para utilizar o framework a partir da CDN, basta adicionar a seguinte linha no documento HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

A partir daí, para estilizar as listas basta utilizar as classes collection (na tag principal da lista) e collection-item (nos itens), como mostra a Listagem 1.


  <ul class="collection">
      <li class="collection-item">Suporte 24h</li>
      <li class="collection-item">10GB de armazenamento</li>
      <li class="collection-item">10 contas de e-mail</li>
  </ul>
  
Listagem 1. Coleção básica estilizada pelo Materialize

Com isso, a lista já receberá a formatação visual adequada aos padrões de design do framework, como podemos ver na Figura 1.

Coleção básica com estilos do Materialize
Figura 1. Coleção básica com estilos do Materialize

Caso se deseje, também é possível adicionar cabeçalhos aos itens da lista, separando-os por categoria, por exemplo. Para isso, é necessário adicionar a class with-header à tag principal da lista e collection-header ao item que será o cabeçalho, como na Listagem 2.


  <ul class="collection with-header">
      <li class="collection-header"><h4>Recursos</h4></li>
      <li class="collection-item">Suporte 24h</li>
      <li class="collection-item">10GB de armazenamento</li>
      <li class="collection-item">10 contas de e-mail</li>
  </ul>
  
Listagem 2. Coleção com cabeçalho

Neste código, também é importante notar que usamos uma tag <h4> para diferenciar o item de cabeçalho. Dessa forma, ele terá um tamanho maior que os demais, como podemos ver na Figura 2.

Coleção com cabeçalho
Figura 2. Coleção com cabeçalho

Coleção de links

Apesar de normalmente utilizarmos a tag <ul> para esse tipo de lista, também é possível estilizar uma coleção de links utilizando uma div como container. Essa configuração é bastante útil para a criação de menus de navegação. Na Listagem 3 podemos ver um exemplo desse caso.


  <div class="collection">
      <a href="#" class="collection-item">Suporte 24h</a>
      <a href="#" class="collection-item">10GB de armazenamento</a>
      <a href="#" class="collection-item">10 contas de e-mail</a>
  </div>
  
Listagem 3. Coleção de links em uma div

O resultado é bem semelhante ao que vimos anteriormente, porém, os links têm a cor da fonte diferenciada e ao passar o cursor do mouse sobre um item, ele é destacado, como é possível observar na Figura 3.

Coleção de links
Figura 3. Coleção de links

Coleção de avatares

Avatares são imagens, normalmente circulares, contendo a foto de uma pessoa, personagem ou uma representação animada/desenho do seu perfil. Com o Materialize é possível estilizar uma lista para exibir avatares, com um título e um texto descritivo. Esse recurso é útil, por exemplo, quando precisamos apresentar, no site, uma lista de pessoas envolvidas em um determinado contexto, como palestrantes de um evento ou membros de um time.

Para obter a formatação desejada, é necessário aplicar aos itens da lista, além da classe collection-item, também a classe avatar. Além disso, no interior do item devemos inserir uma imagem com a classe circle, um span com a classe title e parágrafos contendo algum texto adicional. Na Listagem 4 podemos ver um exemplo desse tipo de lista.


  <ul class="collection with-header">
      <li class="collection-header"><h4>Palestrantes</h4></li>
      <li class="collection-item avatar">
          <img src="avatar1.png" alt="João da Silva" class="circle">
          <span class="title">João da Silva</span>
          <p>Desenvolvedor Front-end</p>
          <p>Empresa X</p>
      </li>
      <li class="collection-item avatar">
          <img src="avatar2.png" alt="Pedro José" class="circle">
          <span class="title">Pedro José</span>
          <p>Engenheiro de Software</p>
          <p>Companhia ABC</p>
      </li>
      <li class="collection-item avatar">
          <img src="avatar3.png" alt="Maria Andrade" class="circle">
          <span class="title">Maria Andrade</span>
          <p>Diretora Executiva</p>
          <p>Grupo Tal</p>
      </li>
  </ul>
  
Listagem 4. Coleção de avatares

O resultado desse código é apresentado na Figura 4.

Coleção de avatares
Figura 4. Coleção de avatares

O Materialize oferece opções de estilização para diversos componentes de uso frequente em aplicações web, como botões, badges e cards, e faz isso baseando-se no Material Design, linguagem visual já consolidada no mercado. Conhecer os recursos desse framework, portanto, nos permite desenvolver aplicações com visual moderno, responsivo e de fácil utilização.