Dropdown
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.