🎛️ Guia de Uso: FK Panel (V2)
Design System SIDASP (Fork Gales)Versão: 2.0.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O FK Panel (V2) é um painel lateral deslizante (Offcanvas) utilizado para criação ou edição rápida de registros relacionados (FKs) sem sair da tela principal. Ele desliza da direita para a esquerda, sobrepondo o conteúdo.
🏗️ Estrutura
html
<!-- Backdrop -->
<div class="fk-v2-panel-backdrop"></div>
<!-- Painel -->
<div class="fk-v2-panel">
<!-- Header -->
<div class="fk-v2-panel__header">
<h2 class="fk-v2-panel__title">Novo Cadastro</h2>
<button class="fk-v2-panel__close">
<i class="material-icons">close</i>
</button>
</div>
<!-- Body -->
<div class="fk-v2-panel__body">
<form class="fk-v2-panel__form">
<!-- Campos -->
</form>
</div>
<!-- Footer -->
<div class="fk-v2-panel__footer">
<button class="btn btn-outline">Cancelar</button>
<button class="btn btn-primary">Salvar</button>
</div>
</div>📏 Tamanhos
O painel suporta larguras predefinidas:
.fk-v2-panel--sm(400px).fk-v2-panel--md(520px) - Padrão.fk-v2-panel--lg(700px).fk-v2-panel--xl(900px).fk-v2-panel--full(100%)
🧩 Componentes Internos
Seletor de Tipo (Cards)
Para selecionar categorias ou tipos.
html
<div class="fk-v2-type-selector">
<label class="fk-v2-type-card">
<input type="radio" name="tipo">
<span class="fk-v2-type-card__icon"><i class="material-icons">person</i></span>
<span class="fk-v2-type-card__label">Pessoa Física</span>
</label>
</div>Área de Upload
Para upload de arquivos drag-and-drop.
html
<div class="fk-v2-upload-area">
<i class="material-icons fk-v2-upload-area__icon">cloud_upload</i>
<div class="fk-v2-upload-area__title">Arraste arquivos aqui</div>
<div class="fk-v2-upload-area__hint">ou clique para selecionar</div>
</div>🌓 Dark Mode
Suporte completo ao modo escuro, com ajuste de fundos, bordas e cores de texto para manter o contraste e a hierarquia visual.
Mantido por: Equipe Ipeweb