Dropdown
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
isOpen
| Atributo | is-open |
| Descrição | Indica se o dropdown está aberto ou fechado. Esta propriedade é refletida no DOM e pode ser alterada externamente. O valor padrão é falso (fechado). |
| Tipo | boolean |
| Valor padrão | false |
placement
| Atributo | placement |
| Descrição | Define o posicionamento do target (alvo) em relação ao trigger (acionador). |
| Tipo | "bottom" | "bottom-end" | "bottom-start" | "left" | "right" | "top" | "top-end" | "top-start" |
| Valor padrão | 'bottom-start' |
preventAutoDismiss
| Atributo | prevent-auto-dismiss |
| Descrição | Define se o dropdown deve permanecer aberto quando outro dropdown é aberto. Quando definido como false (padrão), o dropdown será fechado automaticamente quando outro dropdown for aberto. Quando definido como true, o dropdown permanecerá aberto mesmo quando outro dropdown for aberto. |
| Tipo | boolean |
| Valor padrão | false |
targetZIndex
| Atributo | target-z-index |
| Descrição | Define o z-index do elemento target (alvo) do dropdown. Permite customizar a ordem de sobreposição do painel dropdown em relação aos demais elementos da página. O valor padrão utiliza a variável CSS do design system: var(--z-index-layer-1). |
| Tipo | string |
| Valor padrão | 'var(--z-index-layer-1)' |
Slots
| Nome | Descrição |
|---|---|
"target" | Slot para o conteúdo exibido pelo dropdown. |
"trigger" | Slot para o elemento que aciona a abertura do dropdown. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidOpen | Evento emitido quando o dropdown é aberto. Este evento é usado para implementar o auto-dismiss de outros dropdowns. | true |
brDropdownChange | Evento emitido quando o estado do dropdown muda. | true |
Métodos
hide
| Assinatura | hide() => Promise<{ isOpen: boolean; }> |
| Descrição | Esconde o dropdown. Define a propriedade isOpen como falsa e retorna o novo estado.Este método pode ser chamado externamente. |
| Parâmetros | --- |
open
| Assinatura | open() => Promise<{ isOpen: boolean; }> |
| Descrição | Abre o dropdown. Define a propriedade isOpen como verdadeira e retorna o novo estado.Este método pode ser chamado externamente. |
| Parâmetros | --- |
setFocus
| Assinatura | setFocus() => Promise<void> |
| Descrição | Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto. |
| Parâmetros | --- |