Lista

O que é

A lista é um componente usado para organizar de forma lógica e consistente a visualização de dados na interface. Possui duas variações: horizontal e vertical.

Anatomia

As listas são otimizadas para compreensão de leitura. Uma lista consistente apresenta de forma distribuída a informação. Ela forma uma coluna contínua guiando a leitura do usuário.

1. Label

É o rótulo. Explica brevemente o item que precisamos mostrar para o usuário.

2. Value

É a informação que precisamos transmitir.

3. Linha pontilhada

Guia a visão do usuário e facilita a leiturabilidade.

4. Info icon

É utilizada para chamar tooltips com dicas em relação ao conteúdo de toda a linha, independente se é sobre o título ou a descrição.

Variações

Existem variações para Value. Para utilizar essas variações, selecione o componente nas instâncias e altere no menu direito do Figma.

1. Text: Value padrão.

2. Icon: Com ícone de ação direta como copiar conteúdo para área de transferência.

3. Switch: É usado na lista horizontal tem a função de ativar ou desativar itens. Apesar de não possuir texto, cognitivamente tem o mesmo significado que o Value.

4. Button Text: Para ações mais complexas como editar determinado conteúdo. Geralmente não impacta no fluxo, abrindo uma modal para editar ou visualizar.

Tipos de listas

Há dois tipos de listas: Horizontal e vertical. A diferença entre elas se dá ao ancoramento. Na versão horizontal, o Label Value está alinhado lado a lado equilibrando o conjunto. Já a lista vertical alinha o Label Value um sobre o outro. Desta forma, o peso está do lado esquerdo.

A lista horizontal é a versão principal de lista, use-a sempre que possível.

Lista horizontal

<div class='block-list'> 
  <ul> 
    <li> 
      <label>Label</label>
      <span>Value</span>
    </li> 
  </ul> 
</div> 

---

Lista vertical

<div class="block-list-stacked">
  <ul>
    <li> 
      <label>Label</label>
      <span>Value</span>
    </li> 
  </ul>
</div>

Aplicação

As listas devem ser classificadas de forma lógica para facilitar a leitura e o entendimento por parte do usuário. Elas apresentam o conteúdo de maneira que torna mais fácil identificar o item. Devem se apoiar no conceito de Label Value.

• Entre duas ou mais listas horizontais: não aplique espaçamento.
• Entre duas ou mais listas verticais: aplique espaçamento de 16px.
• Entre uma lista vertical e uma horizontal (e vice versa): aplique espaçamento de 16px.

Boas práticas

• A linha da Lista não é clicável.
• É recomendado o uso de apenas um ícone por linha.
• Quando um value for copiado, seja através de um ícone na lista ou da modal, um toast deve fornecer feedback.

Casos de uso

<h3 class="title">Informações gerais</h3>
<p>Para alterar as informações abaixo, clique no botão editar</p>
<div class='block-list'> 
  <ul> 
    <li> 
      <label>Ativar WhatsApp</label>
      <div class="switch">
        <input id="switch-uc-1" class="switch" type="checkbox" checked="checked">
        <label class="label" for="switch-uc-1" data-on="On" data-off="Off"></label>
      </div>
    </li>
    <li> 
      <label>Número do WhatsApp</label>
      <span>+55 51 912345678</span>
    </li> 
    <li> 
      <label>Departamento</label>
      <span>Atendimento</span>
    </li>
  </ul>
  <div class="buttons is-right">
    <a href="#">
      Editar informações
      <span class="icon is-small">
        <i class="fak fa-edit-small"></i>
      </span>
    </a>
  </div>
</div>