Dropdown 🗑️
Este componente está descontinuado. Substitua pelo Dropdown next. Para mais informações sobre os recursos next leia a documentação.
O Dropdown é uma lista de itens flutuantes que permite a interação em um ou mais itens. Pode ter uma lista de itens simples, itens com ícones e texto de apoio, e ainda permitir a seleção de uma ou mais opções da lista de itens.
É possível usar o Dropdown para abrir um Modal, enviar a pessoa para outra página ou selecionar um item para aplicar em um filtro. Use esse componente apenas para essas finalidades, para as demais recomendamos a utilização do Autocomplete ou do Select.
Largura
A largura mínima é de 160 pixels mas a largura máxima depende do tamanho de seus elementos internos. Seja sucinto ao criar os textos para itens e evitar que um texto fique muito grande em comparação aos demais.
Tipos de itens
No momento, não é possível personalizar os estilos dos itens de um Dropdown.
Texto simples
Uso comum de um item. Nele você pode aplicar um texto principal para descrever o item e, se necessário, um texto de apoio pode complementar o principal.
Ação crítica
Use o item de ações críticas quando a ação do item for relacionada a alguma ação irreversível ou impacte negativamente em um fluxo.
Com ícone
Os ícones adicionam complexidade e podem impactar na leitura das opções, por isso, use somente em casos realmente necessários.
Ícones são elementos decorativos opcionais que reforçam o significado de um item e aparecem sempre à esquerda do texto principal.
Com o componente Tag
Sem conteúdo
Para cenários onde os itens de um Dropdown não existam. Também é possível permitir que a pessoa crie um item a partir do Dropdown.
Separadores
Divisor com linha
Use o divisor com estilo de linha quando precisar criar uma separação visual entre os itens.
Agrupador com texto
Quando a intenção for criar um agrupamento de itens, utilize o divisor de texto, nele você pode adicionar um nome para o grupo de itens.
Seleção
Seleção única
Use para casos em que apenas uma opção pode ser selecionada, como por exemplo a seleção de um filtro em uma listagem. Nesse cenário, ao clicar em uma opção, o filtro já deve ser aplicado.
Múltipla seleção
Use em casos onde mais de uma opção pode ser selecionada. Pode ser aplicado para o caso de seleção de um filtro, porém nesse cenário, recomendamos adicionar um botão de "Aplicar" no rodapé do Dropdown para que o filtro seja aplicado somente quando houver o clique nesse botão.
Estrutura
Cabeçalho
O Dropdown pode ter uma área especial no topo para componentes ou elementos que adicionam funções. No cabeçalho podem ser aplicados os componentes de Busca.
Rodapé
O Dropdown também pode ter uma área especial abaixo da lista de opções, para componentes e elementos específicos. Botões devem aparecer separados da lista por uma linha divisória, então use o botão secundário para não conflitar com ações primárias.
Com loading
Use quando o carregamento dos itens do Dropdown acontecer de forma assíncrona.
Navegáveis
Use quando for necessário criar uma navegação dentro do mesmo Dropdown. Por exemplo, selecionar um período personalizado como um filtro.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.