Dropdown

Apresentação

O componente Dropdown é responsável por criar menus suspensos que permitem ao usuário escolher uma opção entre várias alternativas. Ele é composto por três subcomponentes: Button (botão que ativa o dropdown), Items (container das opções) e Item (opções individuais).

Quando usar

• Para navegação em menus
• Para seleção de opções
• Para ações contextuais
• Para filtros de dados
• Para ordenação de listas
• Para seleção de categorias
• Para ações secundárias
• Para configurações rápidas
• Para seleção de idiomas
• Para seleção de temas

Forma básica de uso

import { Dropdown } from 'eitri-luminus';

// Dropdown básico
<Dropdown>
  <Dropdown.Button>Menu</Dropdown.Button>
  <Dropdown.Items>
    <Dropdown.Item>Opção 1</Dropdown.Item>
    <Dropdown.Item>Opção 2</Dropdown.Item>
    <Dropdown.Item>Opção 3</Dropdown.Item>
  </Dropdown.Items>
</Dropdown>

// Dropdown com classes personalizadas
<Dropdown className="dropdown-end">
  <Dropdown.Button className="btn-primary">
    Menu Personalizado
  </Dropdown.Button>
  <Dropdown.Items className="menu-compact">
    <Dropdown.Item className="text-primary">Opção 1</Dropdown.Item>
    <Dropdown.Item className="text-secondary">Opção 2</Dropdown.Item>
    <Dropdown.Item className="text-accent">Opção 3</Dropdown.Item>
  </Dropdown.Items>
</Dropdown>

// Dropdown com diferentes posicionamentos
<Dropdown className="dropdown-top">
  <Dropdown.Button>Menu Superior</Dropdown.Button>
  <Dropdown.Items>
    <Dropdown.Item>Opção 1</Dropdown.Item>
    <Dropdown.Item>Opção 2</Dropdown.Item>
  </Dropdown.Items>
</Dropdown>

<Dropdown className="dropdown-bottom">
  <Dropdown.Button>Menu Inferior</Dropdown.Button>
  <Dropdown.Items>
    <Dropdown.Item>Opção 1</Dropdown.Item>
    <Dropdown.Item>Opção 2</Dropdown.Item>
  </Dropdown.Items>
</Dropdown>

// Dropdown com conteúdo rico
<Dropdown>
  <Dropdown.Button>
    <div className="flex items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
      </svg>
      <span>Menu com Ícone</span>
    </div>
  </Dropdown.Button>
  <Dropdown.Items>
    <Dropdown.Item>
      <div className="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
          <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
        </svg>
        <span>Opção com Ícone</span>
      </div>
    </Dropdown.Item>
  </Dropdown.Items>
</Dropdown>

Propriedades

Dropdown

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Dropdown.Button

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Dropdown.Items

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente
tabIndex	number	Índice de tabulação

Dropdown.Item

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

Os componentes Dropdown e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O Dropdown usa a classe 'dropdown' para estilização base
• O Dropdown.Button usa a classe 'btn' para estilização base
• O Dropdown.Items usa a classe 'dropdown-content' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• Os componentes são responsivos por padrão
• Suportam diferentes posicionamentos (top, bottom, end, start)
• Mantêm a semântica HTML apropriada
• Podem conter conteúdo rico (ícones, textos, etc)
• São especialmente úteis para navegação e seleção
• Podem ser combinados com outros componentes
• Suportam diferentes tamanhos e estilos
• São ativados por clique por padrão
• Suportam navegação por teclado
• Podem ser usados em menus de navegação
• Suportam diferentes variantes de estilo