Pular para o conteúdo principal

Dropdown

Dica!

O conteúdo de um Dropdown deve ser inserido dentro dos subcomponentes Dropdown.Header, Dropdown.Container e Dropdown.Footer para que todos os estilos funcionem adequadamente.

Elemento âncora​

O Dropdown é posicionado junto ao elemento âncora, que deve ser alguma variação do Button.

Na maioria dos casos, você só precisa usar a propriedade renderAnchor para renderizar a âncora. renderAnchor é uma função que possui as seguintes propriedades:

  • anchorRef: Referência que deve ser passada obrigatoriamente para a propriedade ref do componente que será renderizado
  • toggle: Função que controla a abertura ou fechamento do Dropdown. Em geral deve ser passada para propriedade onClick do componente que será renderizado

Se por algum motivo o renderAchor não atender a sua necessidade, você pode criar seu próprio elemento âncora e usar a propriedade anchorEl para vincular ao Dropdown.

Para isso, você precisará controlar o estado de abertura do Dropdown.

Tipos de itens​

Com texto auxiliar​

Ação crítica​

Ao passar a propriedade href para o Dropdown.Item ele se tornará automaticamente um link.

Você também pode usá-lo com o React Router.

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

export default function ExampleMyComponent() {
  return (
    <Dropdown
      renderAnchor={({ anchorRef, toggle }) => (
        <IconButton
          id="dropdown-anchor"
          onClick={toggle}
          ref={anchorRef}
          kind={IconButton.kinds.secondary}
        >
          <ElipsisV title="Ícone de reticencias para mostrar que há mais opções disponíveis" />
        </IconButton>
      )}
    >
      <Dropdown.Container>
        <Dropdown.Item label="Item 01" to="/caminho" as={LinkRouter} />
        <Dropdown.Item label="Item 02" />
        <Dropdown.Item label="Item 03" />
        <Dropdown.Item label="Item 04" />
      </Dropdown.Container>
    </Dropdown>
  );
}

Com ícone​

Com o componente Tag ou Badge​

Use a propriedade suffix do Dropdown.Item para adicionar os componentes Tag ou Badge.

Sem conteúdo​

Use a propriedade renderEmptyState do componente Dropdown.Container para adicionar uma mensagem quando não houver itens.

Separadores​

Linha de divisão​

Agrupamento com texto​

Seleção​

Seleção simples​

Múltipla seleção​

Estrutura​

Posicionamento​

O Dropdown ajusta seu posicionamento automaticamente caso ele não tenha espaço suficiente na tela para exibir o conteúdo na posição definida.

Utilize a propriedade position se for necessário definir um posicionamento inicial. Consulte a API do componente para mais detalhes.

Com loading​

Use a propriedade loading do componente Dropdown.Container quando estiver realizando um carregamento assíncrono dos itens.

Gerenciamento de estado​

Não controlado​

Por padrão o Dropdown não é controlado. É possível utilizar o parâmetro defaultOpen para definir o estado de abertura inicial do componente.

Controlado​

Você deve criar um estado para gerenciar suas interações de abertura e fechamento com a propriedade open ao utilizar o Dropdown controlado.

Use quando precisar criar uma navegação dentro do Dropdown.

O componente Dropdown pode conter mais de um nível de navegação e essa navegação é feita através do Dropdown.Levels.

Dropdown.Levels renderiza o componte passado na proprieda renderLevels(Levels no exemplo). E na propriedade rootLevel deve ser sempre informado o nome do primeiro level a ser renderizado.

O componente passado ao renderLevels deve renderizar seu conteudo de acordo com a propriedade level.

renderLevels disponibiliza as seguintes propriedades para o componente a ser renderizado.

  • level: Informa qual o nome do level a ser renderizado
  • goback: Função que retorna para o level anterior
  • goToLevel: Função que ativa a renderização do nome do level que recebe como parametro
  • toggle: Função que abre ou fecha o Dropdown
  • ...rest: Qualquer propriedade passada para o subcomponente Dropdown.Levels (com exceção de renderLevels e rootLevels) será reencaminhada como propriedade do argumento da função renderLevels (no exemplo onApply), isto é útil para que informações possam transitar do componente pai para renderização do nível de navegação
import React from 'react';
import { Button, Dropdown } from '@resultadosdigitais/tangram-components';
import { DatePicker } from '@resultadosdigitais/tangram-react-datepicker';

const DEFAULT_PERIOD = 'default-period';
const CUSTOM_PERIOD = 'custom-period';

const Levels = ({ level, goToLevel, goBack, toggle, onApply }) => {
  if (level === CUSTOM_PERIOD) {
    return (
      <>
        <Dropdown.Header>
          <Dropdown.Navigation label="Custom period" back onClick={goBack} />
        </Dropdown.Header>
        <Dropdown.Container>
          <DatePicker inline />
        </Dropdown.Container>
        <Dropdown.Footer>
          <Button
            onClick={() => {
              toggle();
              onApply();
            }}
            kind={Button.kinds.primary}
            fluid
          >
            Apply
          </Button>
        </Dropdown.Footer>
      </>
    );
  }

  return (
    <Dropdown.Container>
      <Dropdown.Item label="Today" />
      <Dropdown.Item label="Yesterday" />
      <Dropdown.Item label="Last 7 days" />
      <Dropdown.Item label="Last 15 days" />
      <Dropdown.Item label="Last 30 days" />
      <Dropdown.Divider />
      <Dropdown.Navigation
        label="Custom period"
        onClick={() => {
          goToLevel(CUSTOM_PERIOD);
        }}
      />
    </Dropdown.Container>
  );
};

export default function DropdownNavigationExample() {
  return (
    <Dropdown
      renderAnchor={({ anchorRef, toggle }) => (
        <Button
          id="dropdown"
          onClick={toggle}
          ref={anchorRef}
          kind={Button.kinds.secondary}
        >
          Time slot
        </Button>
      )}
    >
      <Dropdown.Levels
        rootLevel={DEFAULT_PERIOD}
        renderLevels={Levels}
        onApply={() => alert('Custom date applied')}
      />
    </Dropdown>
  );
}

Exemplo:

Feedback​