28/Overlays

Drawer

Panel lateral (derecha, izquierda o abajo) con el mismo comportamiento que el modal.

Lados

Filtros

Ajusta lo que ves en la tabla.

Buscar

Menú

Panel desde la izquierda.

Útil en móvil como hoja inferior.

HTML

<button class="cb-btn cb-btn--outline" type="button" data-cb-open="demo-drawer">Derecha</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-open="demo-drawer-left">Izquierda</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-open="demo-drawer-bottom">Abajo</button>

<div class="cb-drawer" id="demo-drawer" data-cb-drawer>
  <div class="cb-drawer__panel">
    <div class="cb-drawer__head">
      <div><h2 class="cb-drawer__title">Filtros</h2><p class="cb-drawer__desc">Ajusta lo que ves en la tabla.</p></div>
      <button class="cb-drawer__close" type="button" data-cb-close aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
    </div>
    <div class="cb-drawer__body">
      <div class="cb-field"><label class="cb-field__label" for="drawer-q">Buscar</label><input class="cb-input" id="drawer-q"></div>
    </div>
    <div class="cb-drawer__foot"><button class="cb-btn cb-btn--outline" type="button" data-cb-close>Limpiar</button><button class="cb-btn cb-btn--primary" type="button" data-cb-close>Aplicar</button></div>
  </div>
</div>

<div class="cb-drawer cb-drawer--left" id="demo-drawer-left" data-cb-drawer>
  <div class="cb-drawer__panel">
    <div class="cb-drawer__head"><h2 class="cb-drawer__title">Menú</h2><button class="cb-drawer__close" type="button" data-cb-close aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
    <div class="cb-drawer__body"><p>Panel desde la izquierda.</p></div>
  </div>
</div>

<div class="cb-drawer cb-drawer--bottom" id="demo-drawer-bottom" data-cb-drawer>
  <div class="cb-drawer__panel">
    <div class="cb-drawer__head"><h2 class="cb-drawer__title">Compartir</h2><button class="cb-drawer__close" type="button" data-cb-close aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
    <div class="cb-drawer__body"><p>Útil en móvil como hoja inferior.</p></div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-drawer`	Fondo. `.is-open` lo muestra.
`.cb-drawer--left`, `.cb-drawer--bottom`	Lado del panel (por defecto, derecha).
`.cb-drawer__panel`	Panel de 420px (máximo el ancho de pantalla menos 48px).
`.cb-drawer__head`, `.cb-drawer__title`, `.cb-drawer__desc`, `.cb-drawer__close`	Cabecera.
`.cb-drawer__body`, `.cb-drawer__foot`	Contenido con scroll y acciones.

Atributos data-cb-*

Atributo	Descripción
`data-cb-drawer`	Activa el drawer. Necesita `id`.
`data-cb-open="id"`, `data-cb-close`, `data-cb-static`	Igual que en el modal.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	Antes de abrir o cerrar; ambos se pueden cancelar.

cobalto.drawer.open('demo-drawer');

Accesibilidad

Mismo comportamiento que el modal: rol de diálogo, foco atrapado, Esc y retorno del foco.