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.
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
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
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
To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.