🔎 Guia de Uso: Pesquisar (Layout Configurável)
Design System SIDASP (Fork Gales)Versão: 1.0.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O componente Pesquisar (pesquisar.css) fornece estilos para formulários de busca avançada, frequentemente gerados dinamicamente via configurações JSON. Ele suporta layouts flexíveis de colunas e áreas de instrução lateral.
🏗️ Estrutura
Container Principal
html
<form class="form-pesquisar form-pesquisar--configurable">
<div class="pesquisar-container">
<!-- Campos -->
<div class="pesquisar-form-fields layout-2col">
<!-- ... -->
</div>
<!-- Ações -->
<div class="pesquisar-actions">
<button class="btn btn-primary">Pesquisar</button>
</div>
</div>
</form>ℹ️ Layout com Instruções
Adicione a classe .with-instructions ao container e inclua o painel lateral.
html
<div class="pesquisar-container with-instructions">
<!-- Área do Formulário -->
<div class="pesquisar-form-fields">...</div>
<!-- Painel Lateral -->
<div class="pesquisar-instructions instructions-panel">
<h4>Como Pesquisar</h4>
<ul>
<li>Use filtros exatos para CPF.</li>
<li>Nome aceita busca parcial.</li>
</ul>
</div>
</div>📐 Colunas Responsivas
Use as classes .layout-Xcol no container de campos para definir o grid.
.layout-1col: 1 coluna (Mobile/Padrão).layout-2col: 2 colunas.layout-3col: 3 colunas.layout-4col: 4 colunas
O sistema ajusta automaticamente para 1 ou 2 colunas em dispositivos móveis.
⌨️ Campos
Os campos utilizam classes como .form-field para encapsular label e input.
html
<div class="form-field full-width">
<label class="form-field__label">Nome Completo <span class="required">*</span></label>
<input type="text" class="form-field__input">
<span class="form-field__hint">Digite o nome sem abreviações.</span>
</div>Modificadores de Largura
.full-width: Ocupa toda a linha do grid..half-width: Ocupa 1 coluna (padrão).
Mantido por: Equipe Ipeweb