<page xmlns="http://projectmallard.org/1.0/" xmlns:uix="http://projectmallard.org/experimental/ui/" type="topic" id="drop-down-lists" xml:lang="pt-BR">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <link type="guide" xref="ui-elements"/>

    <uix:thumb mime="image/svg" src="figures/ui-elements/drop-down-list.svg"/>

    <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</mal:years>

    </mal:credit>

  </info>

<title>Listas suspensas</title>

Uma lista suspensa é um elemento de interface do usuário que permite ao usuário selecionar uma lista de opções mutuamente exclusivas. Aparece como um botão que, quando clicado, revela uma lista.

<media type="image" mime="image/svg" src="figures/ui-elements/drop-down-list.svg"/>

Os botões de opção ou uma lista serão muitas vezes preferíveis a uma lista suspensa, pois apresentam todas as opções disponíveis de uma só vez sem qualquer outra interação. Ao mesmo tempo, uma lista suspensa pode ser uma escolha melhor quando:

<list>

<item>
A quantidade de opções é grande.
</item>

<item>
Há pouco espaço disponível.
</item>

<item>
A lista de opções podem alterar ao longo do tempo.
</item>

<item>
O conteúdo da parte oculta do menu é óbvio a partir do seu rótulo e o item selecionado. Por exemplo, se você tiver um menu de opção denominado “Month:” com o item January” selecionado, o usuário pode razoavelmente inferir que o menu contém os 12 meses do ano sem ter que procurar.
</item>

</list>

<section id="general-guidelines">

<title>Diretrizes gerais</title>

<list>

<item>
Enquanto o GTK+ fornece um widget específico de caixa de combinação, recomenda-se que listas suspensas sejam construídas usando uma combinação de um botão e uma janela sobreposta. Isso permite uma rolagem mais confortável para listas longas e permite que a pesquisa seja integrada na lista. Usar esta abordagem também permite que o item atual selecionado sempre seja exibido.
</item>

<item>
Se a quantidade de itens for muito grande, forneça uma função de pesquisa que filtre a lista.
</item>

<item>
Rotule o botão da lista suspensa com um rótulo de texto acima ou à sua esquerda, usando <link xref="writing-style#capitalization">maiusculização de frases</link>. Forneça uma chave de acesso no rótulo que permite ao usuário dar foco diretamente à lista suspensa.
</item>

<item>
Use <link xref="writing-style#capitalization">maiusculização de frases</link> para itens de lista suspensa, por exemplo <gui>Switched movement</gui>.
</item>

</list>

</section>

<section id="custom-values">

<title>Valores personalizados</title>

<media type="image" mime="image/svg" src="figures/ui-elements/drop-down-list-custom-values.svg"/>

Uma lista suspensa pode permitir que os valores personalizados sejam adicionados a uma série de predefinições ou pode ser usada para inserir e selecionar apenas valores personalizados.

<list>

<item>
Certifique-se de que os valores personalizados são ordenados de forma que seja mais útil para os usuários. Ordem alfabética ou de mais recente é comum.
</item>

<item>
Quando uma lista suspensa inclui valores predefinidos e personalizados, separe-os em grupos separados dentro da lista.
</item>

<item>
Permita que valores personalizados sejam removidos da lista.
</item>

<item>
Valide valores personalizados na medida em que eles são inseridos, para evitar erros.
</item>

<item>
Se a lista suspensa apenas aceitar valores personalizados e nenhum valor tiver sido inserido anteriormente, apresente a entrada de valor personalizada quando a lisa suspensa for aberta, em vez de exibir uma lista vazia.
</item>

</list>

</section>

</page>