Dropdown [sw-dropdown]
Menu suspenso standalone — fecha ao clicar fora, no item, ou com Esc.
1. Padrão
2. Com ícones, cabeçalho, divisor e item de perigo
Itens aceitam <i class="swi swi-*"> à esquerda, .sw-dropdown-hdr como rótulo de seção, .sw-dropdown-div como linha divisória e .is-dgr para ações destrutivas.
3. Alinhado à direita .is-rgt
Útil quando o botão está perto da borda direita e o menu não pode transbordar.
4. Dropup .is-up
O menu abre para cima — ideal quando o botão está no rodapé da tela.
5. Zoom .is-zoom
Entrada com efeito de zoom a partir do canto do botão, em vez do deslize padrão. Combine com .is-rgt/.is-up e a origem do zoom se ajusta sozinha.
6. Tintado .is-tint
Painel com um leve tom da cor primária no fundo e na borda — bom pra destacar um menu de contexto principal.
7. Submenu .sw-dropdown-sub
Item pai com painel aninhado, aberto ao passar o mouse — sem JS extra, é .sw-dropdown-sub:hover. Envolva o item-gatilho (sem clique próprio) e o .sw-dropdown-mn filho num .sw-dropdown-sub.
Referência
| Atributo/Classe | Descrição |
|---|---|
[sw-dropdown] | Container raiz. |
.sw-dropdown-tgl | Elemento que abre/fecha o menu. |
.sw-dropdown-mn | Painel do menu. |
.sw-dropdown-it | Item — clicar fecha o menu (a menos que tenha .is-dis). |
.sw-dropdown-it.is-dgr | Item de ação destrutiva (vermelho). |
.sw-dropdown-hdr | Rótulo de seção não clicável dentro do menu. |
.sw-dropdown-div | Linha divisória entre grupos de itens. |
.sw-dropdown-arr | Ícone de seta no botão — gira 180° quando o menu abre. |
.is-rgt | Alinha o menu à direita do botão. |
.is-up | Dropup — menu abre para cima. |
.is-zoom | Entrada com zoom a partir do canto do botão. |
.is-tint | Painel com leve tom da cor primária. |
.sw-dropdown-sub | Envolve um item + um .sw-dropdown-mn aninhado — abre ao passar o mouse (sem clique, sem JS extra). |
sw:dropdown:open / sw:dropdown:close | Eventos disparados no container. |
SW.Dropdown.open(el) / .close(el) | API programática. |