Pular para o conteúdo principal

Dropdown Next

Informação

Você está visualizando a documentação de um recurso next.

Para evitar conflitos de nomes, os recursos next são agrupados na documentação através do objeto Next.

Base​

Elemento âncora​

O Dropdown sempre será posicionado em relação a um determinado elemento do DOM, elemento esse que, por padrão, ao ser clicado também controlará a abertura do Dropdown. Este elemento é denominado elemento âncora.

Utilize a propriedade anchor para vincular o Dropdown a um elemento âncora. Passe uma string com o id do elemento, o próprio elemento do DOM ou um objeto de referência do React.

Atenção!

Garanta que o elemento âncora referenciado esteja presente no DOM no momento da renderização do Dropdown para evitar erros de posicionamento.

Posicionamento​

Utilize a propriedade side para definir o lado do elemento âncora que o Dropdown será posicionado e a propriedade alignment para definir o alinhamento em relação ao lado (side) escolhido.

Os valores disponíveis para a propriedade alignment dependem dos valores indicados para a propriedade side:

  • Para side com valores top e bottom: left, center e right
  • Para side com valores left e right: top, center e right
Informação

Caso não haja espaço suficiente, o Dropdown reposiciona-se automaticamente, ignorando as valores de lado (side) e alinhamento (alignment) fornecidos.

Visibilidade​

Não controlado​

Por padrão, o Dropdown não é controlado. Utilize o parâmetro defaultShow para indicar que o componente deve iniciar visível por padrão.

Controlado​

Use a propriedade show e o callback onToggle para controlar a visibilidade do Dropdown.

Itens​

Utilize o subcomponente Dropdown.Item junto com a sua propriedade label para criar as opções do menu.

Com texto auxiliar​

Utilize a propriedade auxiliaryText para exibir uma informação adicional. Esta descrição é útil para fornecer mais contexto ou detalhes sobre a ação do item.

Truncado​

Utilize a propriedade truncate para limitar o texto da label e do auxiliaryText ao espaço horizontal disponível.

Com ícone​

Utilize a propriedade prefix do subcomponente Dropdown.Item para adicionar ícones no início do item.

Com avatar​

Utilize a propriedade prefix do subcomponente Dropdown.Item junto com o componente Avatar para adicionar uma imagem de perfil no início do item.

Com Tag ou Badge​

Utilize a propriedade suffix do subcomponente Dropdown.Item junto com os componentes Tag ou Badge para adicionar informações extras ao fim do item.

Utilize a propriedade href junto com o subcomponente Dropdown.Item para torná-lo automaticamente um link.

Em aplicações que fazem uso do React Router ou outra lib de roteamento, utilize a propriedade as para definir um tipo específico de elemento para o DropdownItem.

import { Link as LinkRouter } from 'react-router-dom';
import { Dropdown } from '@resultadosdigitais/tangram-components/next';
import { IconButton } from '@resultadosdigitais/tangram-components/';
import { ElipsisV } from '@resultadosdigitais/tangram-react-icons';

export default function WithReactRouter() {
  return (
    <>
      <IconButton id="anchor" kind={IconButton.kinds.secondary}>
        <ElipsisV title="Ver mais" />
      </IconButton>

      <Dropdown anchor="anchor">
        <Dropdown.Item label="Importar" as={LinkRouter} to="/import" />
        <Dropdown.Item label="Ver dados" as={LinkRouter} to="/data" />
        <Dropdown.Item label="Alertas" as={LinkRouter} to="/alerts" />
      </Dropdown>
    </>
  );
}

Item selecionado​

Utilize a propriedade selected do subcomponente Dropdown.Item para indicar que o item está selecionado.

Item de ação crítica​

Utilize a propriedade danger do subcomponente Dropdown.Item para indicar que se trata de um item para uma ação crítica, isto é, alguma ação irreversível ou que impacte negativamente em um fluxo.

Item desabilitado​

Utilize a propriedade disabled do subcomponente Dropdown.Item para indicar que o item está desabilitado.

Seleção​

Seleção única​

Utilize o subcomponente Dropdown.Item para casos em que apenas um item pode ser selecionado.

Seleção múltipla​

Utilize o subcomponente Dropdown.Checkbox para casos em que vários itens podem ser selecionados.

Estrutura​

Organize o conteúdo do Dropdown utilizando os subcomponentes Dropdown.Header, Dropdown.Content e Dropdown.Footer.

O subcomponente Dropdown.Content é opcional. Todos os filhos do componente Dropdown que não forem Dropdown.Header, Dropdown.Footer e Dropdown.EmptyState são automaticamente envolvidos por um Dropdown.Content mesmo que não esteja presente diretamente no código.

Informação

Os subcomponentes Dropdown.Header, Dropdown.Content e Dropdown.Footer devem ser sempre filhos imediatos do Dropdown.

Utilize o subcomponente Dropdown.Header para posicionar conteúdos no topo do menu.

Conteúdo​

Utilize o subcomponente Dropdown.Content para delimitar a área de scroll do menu.

Utilize o subcomponente Dropdown.Footer para posicionar conteúdos na base do menu.

Estado vazio​

Utilize o subcomponente Dropdown.EmptyState para fornecer orientação quando não houver itens a serem exibidos.

Informação:

O Dropdown.EmptyState deve ser sempre um filho imediato do Dropdown.

Agrupadores​

Separador​

Utilize o subcomponente Dropdown.Divider para criar divisões visuais entre os itens.

Grupo​

Utilize o subcomponente Dropdown.Group com a propriedade label para agrupar os itens.

Grupo colapsável​

Adicione a propriedade collapsible ao subcomponente Dropdown.Group para permitir que o usuário expanda ou recolha as categorias.

Loading​

Utilize a propriedade loading do Dropdown para indicar o estado de espera pelo carregamento do conteúdo.

Informação

Mesmo que o Dropdown tenha filhos (children) definidos, a propriedade loading quando true sempre irá substituir o conteúdo por um sinalizador de carregamento.

O Dropdown suporta menus aninhados de forma nativa. Ao passar children para o subcomponente Dropdown.Item, esse item se torna o gatilho para um novo nível de navegação. Ao clicar em um item com subitens, o conteúdo atual é substituído pelo novo nível.

Botão de voltar​

Por padrão, itens que possuem submenus incluem um botão de retorno para o nível anterior. Para desabilitar esse comportamento e definir um botão customizado, utilize a propriedade hideBack em Dropdown.Item em conjunto com o componente Dropdown.Back.

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.