Pular para o conteúdo principal

Dropdown Next

Uso​

O componente Dropdown é uma lista suspensa que permite a interação com um ou mais itens. Ele pode conter uma lista simples de itens, itens com ícones e texto explicativo, e ainda permitir a seleção de uma ou mais opções da lista.

Você pode usar o Dropdown para abrir um Modal, redirecionar o usuário para outra página ou selecionar um item para aplicar a um filtro. Use este componente apenas para essas finalidades. Para outras ações ligadas a entrada de dados, recomenda-se o uso do Autocomplete ou Select.

Largura​

O Dropdown tem a largura mínima de 160 pixels e máxima de 620 pixels. Ao escrever os textos dos itens, seja conciso e evite que um texto fique muito grande em comparação com os demais.

É possível definir uma largura customizada por meio da propriedade width. Utilize o valor fit-anchor para que a largura do Dropdown seja igual à do elemento âncora.

Tipos de itens​

Texto simples​

O uso comum de um item. Permite usar um texto principal para descrever o item e, se necessário, um texto de apoio para complementá-lo.

Ação crítica​

Utilize o item de ação crítica quando a ação do item estiver relacionada a alguma ação irreversível ou impactar negativamente um fluxo.

Com ícone​

Dica

Os ícones aumentam a complexidade e podem afetar as opções de leitura, portanto, use-os somente quando realmente necessário.

Os ícones são elementos decorativos opcionais que reforçam o significado de um item e sempre aparecem à esquerda do texto principal.

Com Tag ou Badge​

Sem conteúdo​

Para cenários onde os itens de um Dropdown não existam. Também é possível permitir a criação de 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.

Seleção múltipla​

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​

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.

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.

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.