JS Component

Panel / Offcanvas Y2Panel

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

5. API JavaScript

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

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

// Eventos
panel.addEventListener('yd:panel:open',  () => console.log('Painel aberto'));
panel.addEventListener('yd:panel:close', () => console.log('Painel fechado'));
Quick Reference
Atributo / Classe Elemento Descrição
y2panel div Ativa Y2Panel no elemento
y2panel-open="#id" button Botão de abertura por seletor
.pnl div Container do painel
.pnl-ovl div Overlay de fundo - fecha ao clicar
.pnl-box div Caixa interna do painel (conteúdo)
.pnl-hdr div Cabeçalho do painel
.pnl-bdy div Área de conteúdo com scroll
.pnl-ftr div Rodapé fixo do painel
.pnl-cls button Botão de fechamento dentro do painel
.is-lft / .is-bot / .is-top .pnl Posição do painel (padrão: direita)
.pnl-box.is-sm / .is-lg / .is-fl .pnl-box Tamanhos: pequeno / grande / full
.is-act .pnl Estado aberto - adicionado automaticamente pelo JS
yd:panel:open / yd:panel:close evento Eventos customizados disparados pelo componente