<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:uix="http://projectmallard.org/experimental/ui/" xmlns:itst="http://itstool.org/extensions/" type="topic" id="lists" xml:lang="pt-BR">

  <info>
    <link type="guide" xref="patterns#primary"/>
    <desc>Listas de informações ou itens de conteúdo.</desc>
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Georges Neto</mal:name>
      <mal:email>georges.stavracas@gmail.com</mal:email>
      <mal:years>2014,</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Rafael Fontenelle</mal:name>
      <mal:email>rafaelff@gnome.org</mal:email>
      <mal:years>2017-2021</mal:years>
    </mal:credit>
  </info>

<title>Listas</title>

<p>As listas são um elemento básico de interface de usuário que pode ser usado para apresentar informações, itens de conteúdo ou controles. Existem dois tipos principais de lista no GNOME 3: listas e tabelas padrão.</p>

<p><link xref="sidebar-lists">Listas de barras laterais</link> são um padrão de design separado que também faz uso de uma lista.</p>

<section id="when-to-use">
<title>Quando usar</title>

<p>Uma lista é uma maneira apropriada de apresentar itens de conteúdo que tenham um nome distinto como seu principal identificador. Se o conteúdo for de natureza visual, como, por exemplo, com fotos ou vídeos, você pode considerar usar uma <link xref="grids">grade</link> em vez disso.</p>

<p>Em alguns casos, é vantajoso mostrar uma visão de lista e de grade para os mesmos itens de conteúdo. Usado dessa maneira, uma visão de lista permite que informações adicionais sejam exibidas sobre o conteúdo através de colunas de informações.</p>

</section>

<section id="standard-lists">
<title>Listas padrão</title>

<p>As listas padrão são tipos de lista mais comuns, e geralmente devem ser usadas em favor das tabelas.</p>

<p>Nas listas padrão, cada linha é dividida por separadores e a alteração do ordenamento é conseguida usando um controle fora da própria lista.</p>

<section id="styles">
<title>Estilo</title>

<p>As listas padrão têm dois estilos: largura total e incorporada. As listas de largura total enchem o contêiner, enquanto as listas incorporadas são cercadas por preenchimento.</p>

<p>As listas de largura total são visualmente mais simples e, portanto, mais elegantes. Elas devem ser usadas sempre que possível. Ao mesmo tempo, nem sempre é possível usar uma lista de largura total e há algumas situações em que as listas incorporadas são uma escolha melhor:</p>

<list>
<item><p>Quando a lista contém colunas de informações que devem ser mantidas próximas entre si para fins de legibilidade, e há necessidade de ter a lista dentro de um contêiner amplo.</p></item>
<item><p>Quando uma janela contém várias listas.</p></item>
<item><p>Quando a lista precisa ser alinhada com outros controles dentro da janela.</p></item>
</list>

<media type="image" mime="image/svg" src="figures/patterns/list-styles.svg"/>

</section>

<section id="editable-lists">
<title>Listas editáveis</title>

<p>As listas editáveis permitem que um usuário adicione ou remova itens da lista (por esse motivo, às vezes são conhecidos como listas de adicionar/remover). Ambas listas de largura total e incorporadas podem ser editáveis.</p>

<p>Cada linha contém um botão remover. Se o número de itens for curto, a linha final da lista deve ser usada como um botão de adicionar. Alternativamente, se a lista for longa, o botão de adicionar pode ser colocado na <link xref="header-bars">barra de cabeçalho</link> ou <link xref="action-bars">barra de ação</link>.</p>

<media type="image" mime="image/svg" src="figures/patterns/editable-lists.svg"/>

</section>
</section>

<section id="tables">
<title>Tabelas</title>

<p>As tabelas podem ser usadas para listas de multicolunas mais complexas, onde a classificação da tabela por uma variedade de colunas é comum. Os cabeçalhos das colunas permitem às pessoas identificar o tipo de informação em cada coluna e reordenar a lista de acordo com o conteúdo de cada coluna.</p>

<p>Ao usar cabeçalhos de coluna, indique a ordem de classificação usando setas no cabeçalho.</p>

<table>
<thead>
<tr>
<td><p>Ordem</p></td>
<td><p>Direção da seta</p></td>
<td><p>Exemplo</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Natural</p></td>
<td><p>Para baixo</p></td>
<td><p>Alfabética, número menor primeiro, data mais antiga primeiro, itens selecionados primeiro</p></td>
</tr>
<tr>
<td><p>Inversa</p></td>
<td><p>Para cima</p></td>
<td><p>Alfabética inversa, número maior primeiro, data mais recente primeiro, itens não selecionados primeiro</p></td>
</tr>
</tbody>

</table>

</section>

<section id="row-behavior">
<title>Comportamento da linha</title>

<p>Dependendo do tipo de lista, as linhas têm comportamentos diferentes quando são clicados ou pressionados. Existem três tipos de lista a este respeito:</p>

<table>
<thead>
<tr>
<td><p>Tipo de lista</p></td>
<td><p>Comportamento da linha</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Navegação</p></td>
<td><p>Selecionar uma linha abre o item correspondente, seja por meio da navegação em uma nova visualização ou na abertura de uma caixa de diálogo. Esse padrão é comum para listas de itens de conteúdo ou para apresentar grupos de configurações.</p></td>
</tr>
<tr>
<td><p>Selecionar</p></td>
<td><p>O item da lista é selecionado quando é clicado ou pressionado. Essa abordagem é frequentemente usada para selecionar uma das séries de opções de configuração. No caso das <link xref="drop-down-lists">listas suspensas</link>, uma opção sempre está selecionada. A linha selecionada é indicada por uma marca de seleção.</p></td>
</tr>
<tr>
<td><p itst:context="list-type">Editar</p></td>
<td><p>Selecionar o item de linha transforma a linha em um campo de entrada de texto, que permite que o item seja editado.</p></td>
</tr>
</tbody>
</table>

<p>As listas de estilos de navegação podem ser combinadas com <link xref="selection-mode">modo de seleção</link> para permitir que as linhas sejam abertas e manipuladas. Usar o clique duplo para abrir itens da lista deve ser evitado, uma vez que não é descoberta e é incompatível com a entrada de toque.</p>

</section>

<section id="general-guidelines">
<title>Diretrizes gerais</title>

<list>
<item><p>Diferencie os diferentes tipos de informação usando diferentes alinhamentos, <link xref="typography">cores e pesos de texto</link>. Destaque as informações mais importantes e relevantes, fornecendo outras informações com um peso e/ou cor mais leves.</p></item>
<item><p>Tenha cuidado para não superpopular listas com diferentes colunas e elementos, e assegure-se de usá-los apenas para apresentar informações essenciais.</p></item>
<item><p>Como regra geral, evite usar várias listas na mesma janela, particularmente janelas primárias.</p></item>
<item><p>Não use listas com menos de cerca de cinco itens, a menos que o número de itens possa aumentar ao longo do tempo. Para listas de opções, caixas de seleção ou botões de opção podem ser usados como uma alternativa neste caso.</p></item>
<item><p>Certifique-se de que as listas estejam ordenadas para serem úteis para aqueles que as usam. Os documentos recentes podem ser mais úteis do que os documentos ordenados alfabeticamente, ou os contatos online podem ser mais interessantes do que aqueles que estão offline, por exemplo.</p></item>
<item><p>Se você usar ícones na sua lista, <link xref="icons-and-artwork">use ícones simbólicos</link>. A menor pegada visual desses ícones significará que eles não sobrecarregam ou dominam visualmente sua lista.</p></item>
<item><p>Se a lista for longa, procure pesquisá-la usando o <link xref="search">padrão de design de pesquisa</link>.</p></item>
</list>

</section>

<section id="api-reference">
<title>Referência de API</title>
<list>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkListBox.html">GtkListBox</link></p></item>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkTreeView.html">GtkTreeView</link></p></item>
</list>
</section>

</page>
