📑 Guia de Uso: Listagem (Listar)
Design System SIDASP (Fork Gales)Versão: 1.1.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O componente Listar define o layout padrão para telas de listagem no sistema. Ele divide a tela em um sidebar fixo à esquerda (para navegação entre abas de Pesquisa/Lista) e uma área de conteúdo principal à direita.
🏗️ Estrutura
O layout utiliza position: fixed para ocupar toda a tela abaixo do header principal.
html
<div class="listing-layout">
<!-- Sidebar Esquerdo -->
<div class="listing-layout__sidebar">
<!-- Tabs -->
</div>
<!-- Conteúdo Principal -->
<div class="listing-layout__content">
<!-- Breadcrumb -->
<div class="listing-layout__breadcrumb">...</div>
<!-- Área Scrollável -->
<div class="listing-layout__main">
<!-- Painéis (Pesquisar / Resultado) -->
</div>
<!-- Footer (Opcional) -->
<div class="listing-layout__footer">...</div>
</div>
</div>⬅️ Sidebar
O sidebar contém as abas de navegação principais da tela.
html
<div class="listing-layout__sidebar">
<button class="listing-layout__tab listing-layout__tab--active">
<span class="listing-layout__tab-text">Pesquisar</span>
<span class="listing-layout__tab-icon">
<svg>...</svg> <!-- Chevron -->
</span>
</button>
<button class="listing-layout__tab">
<span class="listing-layout__tab-text">Listagem</span>
<span class="listing-layout__tab-icon">
<svg>...</svg>
</span>
</button>
</div>📄 Conteúdo Principal
A área .listing-layout__main é onde o conteúdo real (formulário de pesquisa ou tabela de resultados) reside. Ela possui scroll independente.
Painéis
Use .listing-layout__panel para alternar entre visões.
html
<div class="listing-layout__main">
<!-- Painel de Pesquisa -->
<div class="listing-layout__panel listing-layout__panel--active" id="panel-search">
<!-- Formulário -->
</div>
<!-- Painel de Listagem -->
<div class="listing-layout__panel" id="panel-list">
<!-- Tabela -->
</div>
</div>🌓 Dark Mode
O layout se adapta automaticamente ao modo escuro:
- Sidebar: Fundo escuro (
#10141D), bordas ajustadas. - Conteúdo: Fundo levemente mais claro que o sidebar (
#141926). - Tabs: Cores de texto e hover ajustados para contraste.
Mantido por: Equipe Ipeweb