JS Component

Panel / Offcanvas SWPanel

Painel deslizante de qualquer lado com overlay - ideal para filtros, carrinhos, detalhes e drawers.

1. Demo ao Vivo

Painel Lateral

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

FILTROS

Painel Inferior

Painel deslizante de baixo - ideal para confirmações mobile, filtros e menus de ação.

Painel Esquerda

Painel deslizante da esquerda. Mesmo comportamento da sidebar, mas sem persistência.

Painel Superior

Painel deslizante do topo - ideal para notificações, alertas e banners de ação.

2. Estrutura HTML

3. Posições

4. Tamanhos

Precisa de um valor exato em vez dos nomes prontos? Use --sw-panel-sz direto no style — aceita px, rem ou %.

5. Tamanho por Porcentagem & Velocidade

Defina --sw-panel-sz com qualquer porcentagem da tela, e --sw-panel-spd pra controlar a velocidade da animação de abrir/fechar (padrão 0.35s).

20%

style="--sw-panel-sz:20%"

60%

style="--sw-panel-sz:60%"

80%

style="--sw-panel-sz:80%"

Lento

style="--sw-panel-spd:1.2s"

📱 Responsivo

Abaixo de 640px de largura de tela, o painel ignora --sw-panel-sz e as classes .is-sm/.is-lg — abre sempre em tela cheia, pra não ficar apertado no celular.

🌗 Dia & Noite

O painel usa os mesmos tokens de tema do resto do framework (--sw-bg, --sw-txt-mut, --sw-bor-glow) — troque o tema no botão do canto que ele se adapta automaticamente, sem nenhuma configuração extra.

6. Abrir com conteúdo via AJAX

Um botão com sw-ajax (a URL/arquivo a buscar) e sw-ajax-target="panel" busca o conteúdo e o coloca dentro de um painel, que é criado automaticamente se você não apontar um já existente via sw-panel="#id" — depois disso o painel abre sozinho. Segue a mesma restrição de mesma origem do resto do sw-ajax.

7. API JavaScript

const panel = document.querySelector('#meu-panel');

// Abrir / fechar
SW.Panel.show('#meu-panel');
SW.Panel.hide('#meu-panel');

// Eventos
panel.addEventListener('sw:panel:open',  () => console.log('Painel aberto'));
panel.addEventListener('sw:panel:close', () => console.log('Painel fechado'));

Quick Reference

Atributo / Classe Elemento Descrição
.sw-panel div Container/caixa deslizante do painel — já é o elemento posicionado, sem wrapper.
sw-panel-open="#id" button Botão de abertura por seletor.
sw-panel-close button Atributo — qualquer botão dentro do painel com isso fecha ao clicar.
.pnl-hdr div Cabeçalho do painel (opcional).
.pnl-bdy div Área de conteúdo com scroll — cresce pra preencher o espaço entre header e footer.
.pnl-ftr div Rodapé do painel (opcional).
.pnl-cls button Estilo do botão X — combine com sw-panel-close pra funcionar.
.is-lft / .is-bot / .is-top .sw-panel Posição do painel (padrão: direita).
.is-sm / .is-lg / .is-fl .sw-panel Tamanhos prontos: pequeno (240px) / grande (480px) / full (100%).
--sw-panel-sz .sw-panel (style) Largura (ou altura, em .is-bot/.is-top) exata — aceita px, rem ou %. Abaixo de 640px de tela, é ignorado (vira tela cheia).
--sw-panel-spd .sw-panel (style) Duração da animação de abrir/fechar (padrão 0.35s).
.is-active .sw-panel Estado aberto — adicionado automaticamente pelo JS.
sw:panel:open / sw:panel:close evento Eventos customizados disparados pelo componente.
Clique fora / Esc — Fecha o painel automaticamente.
sw-ajax-target="panel" button/link com sw-ajax Busca conteúdo via AJAX e abre num painel (cria um automaticamente se sw-panel="#id" não for informado).