⚙️ Guia de Uso: Dropdown de Operações
Design System SIDASP (Fork Gales)Versão: 2.0.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O Dropdown de Operações é utilizado em listagens de dados (tabelas) para agrupar ações secundárias relacionadas a um registro, economizando espaço horizontal.
🏗️ Estrutura
Container Principal
O dropdown é posicionado absolutamente em relação ao botão de acionamento.
html
<div class="div-operacao">
<!-- Botão de acionamento -->
<button class="operacao-button">
<i class="material-icons">more_horiz</i>
</button>
<!-- Menu Dropdown -->
<div class="operacao-items hidden">
<div class="operacao-items-container">
<ul class="mdl-list">
<!-- Itens -->
</ul>
</div>
</div>
</div>🔘 Botões de Acionamento
Botão "Mais Opções" (Três Pontos)
Usado para abrir o menu dropdown.
html
<button class="operacao-button">
<i class="material-icons">more_horiz</i>
</button>Botão "Detalhar" (Ação Direta)
Botão de ação rápida que fica fora do dropdown, geralmente para ver detalhes.
html
<button class="icone-listagem">
<i class="material-icons">visibility</i>
</button>📋 Itens de Menu
Cada item do menu possui um ícone e um rótulo.
html
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">edit</i>
<p>Editar Registro</p>
</span>
</li>Separador
Use <hr> ou .divider para separar grupos de ações.
html
<hr>🌓 Dark Mode
O componente adapta automaticamente suas cores de fundo, bordas, sombras e textos para o modo escuro, mantendo a hierarquia visual e legibilidade.
Mantido por: Equipe Ipeweb