Panel no SWCore — documentação e exemplos

O que é

Gaveta lateral ou vertical que desliza sobre o conteúdo com overlay inteligente, trava de scroll e fechamento automático por clique fora ou tecla Esc.

Como funciona

O botão sw-panel-open="#id" abre o painel correspondente. O elemento .sw-panel desliza com animação acelerada por GPU, injetando o overlay .sw-panel-ovl e gerenciando o foco de acessibilidade.

Exemplos

01 · Demo ao Vivo (4 Posições) Ao vivo

Painel Lateral (Direita)

Este é um painel deslizante da direita. Ideal para filtros, carrinho de compras, configurações e detalhes de registros.

Filtros Rápidos

Disponível em estoque Promoções ativas Frete grátis

Painel Inferior (Bottom Sheet)

Painel deslizante de baixo — ideal para confirmações mobile, menus de ação e formulários rápidos.

Painel Esquerda

Painel deslizante da esquerda. Excelente para menus laterais contextuais, navegação secundária e drawers de perfil.

Painel Superior (Topo)

Painel deslizante do topo — ideal para notificações de emergência, avisos do sistema e banners de ação.

<!-- Botão que abre o painel -->
<button class="sw-btn sw-btn-pri" sw-panel-open="#meu-painel">Abrir Painel</button>

<!-- Estrutura do Painel -->
<div class="sw-panel" id="meu-painel">
  <div class="pnl-hdr">
    <h3>Título do Painel</h3>
    <button class="pnl-cls" sw-panel-close aria-label="Fechar"></button>
  </div>
  <div class="pnl-bdy">
    <p>Conteúdo deslizante do painel...</p>
  </div>
  <div class="pnl-ftr">
    <button class="sw-btn sw-btn-pri" sw-panel-close>Salvar</button>
    <button class="sw-btn sw-btn-out" sw-panel-close>Cancelar</button>
  </div>
</div>

02 · Tamanhos Prontos (is-sm, padrão, is-lg, is-fl) Ao vivo

Painel SM (280px)

Formato compacto para opções rápidas.

Painel LG (560px)

Formato amplo para tabelas, formulários e pré-visualizações.

Painel Full (100%)

Ocupa 100% da viewport para máxima imersão.

<!-- Pequeno (280px) -->
<div class="sw-panel is-sm" id="pan-sm">...</div>

<!-- Normal (420px - padrão) -->
<div class="sw-panel" id="pan-normal">...</div>

<!-- Grande (560px) -->
<div class="sw-panel is-lg" id="pan-lg">...</div>

<!-- Tela Cheia (100%) -->
<div class="sw-panel is-fl" id="pan-fl">...</div>

03 · Tamanho por Porcentagem & Velocidade (--sw-panel-sz / --sw-panel-spd) Ao vivo

25% da Tela

Largura controlada via variável CSS --sw-panel-sz: 25vw.

60% da Tela

Largura controlada via variável CSS --sw-panel-sz: 60vw.

Transição de 0.8s

Duração da animação personalizada via --sw-panel-spd: 0.8s.

<!-- Largura exata por porcentagem ou px -->
<div class="sw-panel" style="--sw-panel-sz: 60vw;">...</div>

<!-- Duração personalizada da transição -->
<div class="sw-panel" style="--sw-panel-spd: 0.8s;">...</div>

Atributos

sw-panel-open="#id"

no botão de abertura — aponta para o ID do painel

sw-panel-close

no botão interno — fecha o painel ao clicar

Variantes

(Padrão)

abre pela direita (largura 420px)

is-lft

abre pela esquerda

is-bot

abre por baixo (bottom sheet)

is-top

abre pelo topo

is-sm

tamanho compacto (280px)

is-lg

tamanho amplo (560px)

is-fl

largura ou altura total (100%)

--sw-panel-sz

largura ou altura personalizada via CSS (px, rem ou %)

--sw-panel-spd

velocidade de abertura/fechamento (padrão 0.35s)

Eventos

sw:panel:open

disparado no painel ao abrir

sw:panel:close

disparado no painel ao fechar

API (JavaScript)

SW.Panel.show(target, trigger?)

abre o painel por seletor ou elemento

SW.Panel.hide(target)

fecha o painel

SW.Panel.toggle(target, trigger?)

alterna entre aberto e fechado

Requisitos

Nenhuma.

Limitações — o que ele não faz

Abaixo de 640px de largura de tela (mobile), os painéis laterais assumem automaticamente 100% de largura para garantir excelente ergonomia.

Panel Componentes