Panel lateral

Panel que entra por un borde y ocupa todo su eje: filtros de una lista, menú en el móvil, carrito, detalle de un registro. Comparte con el modal la mecánica del <dialog> — lo que cambia es la geometría y el movimiento: en el centro el diálogo crece, en el borde se desliza, porque así el panel dice de dónde vino.

Ejemplos

Todos los de abajo son el mismo Tucano.drawer() con opciones distintas.

Cómo usar

Los mismos dos caminos del modal. Desde JavaScript el panel se monta en el momento y sale del DOM al cerrarse; desde la plantilla ya está en la página, y el componente solo lo abre, lo cierra y lo anima.

En JavaScript

Tucano.drawer({
  title: 'Filtros',
  text: 'Afina la lista de contratos.',
  side: 'right',      // left | right | top | bottom
  size: 'md',         // sm | md | lg — en los laterales, ancho de la columna
  tone: 'default',    // default | danger | success | warning
  actions: [
    { text: 'Limpiar', variant: 'ghost' },
    { text: 'Aplicar', variant: 'primary', onClick: (drawer) => apply() },
  ],
}).content(form);

// Montado antes, abierto después
const drawer = new Tucano.Drawer({ title: 'Carrito', side: 'right' });
drawer.content(list).open();
drawer.close();

actions sigue las mismas reglas del modal: text, variant (predeterminado outline), onClick, que recibe la instancia, y closes: false para mantenerlo abierto. onClose(reason, drawer) recibe 'button', 'action', 'escape', 'backdrop' o 'api'.

En la plantilla de Django

El caso típico es el formulario de filtros de una lista: lo renderiza el servidor, con los valores que llegaron en request.GET, y el panel solo lo oculta hasta que alguien lo pida.

<dialog class="tuc-drawer is-right is-md" id="filters" aria-labelledby="filters-title">
  <form class="tuc-drawer__panel" method="get">
    <div class="tuc-drawer__top">
      <div class="tuc-drawer__header">
        <h2 class="tuc-drawer__title" id="filters-title">Filtros</h2>
      </div>
      <button type="button" class="tuc-btn is-ghost is-icon is-sm tuc-drawer__close" aria-label="Cerrar" data-tuc-drawer-close>…</button>
    </div>
    <div class="tuc-drawer__body">
      {{ form.as_div }}
    </div>
    <div class="tuc-drawer__footer">
      <a class="tuc-btn is-ghost" href="?">Limpiar</a>
      <button class="tuc-btn is-primary">Aplicar</button>
    </div>
  </form>
</dialog>

<button class="tuc-btn is-outline" data-tuc-drawer="#filters">Filtros</button>

Todo dialog.tuc-drawer se adopta al cargar y en cada htmx:afterSwap. Las clases internas siguen el nombre del componente: __panel, __top, __header, __title, __text, __close, __body y __footer. En la plantilla, escribe la X y el aria-labelledby: desde JavaScript los dos salen listos, a mano no.

Lados y tamaños

La caja se estira en el eje del borde en el que se apoya — en los laterales ocupa toda la altura, arriba y abajo todo el ancho — y el borde de la caja queda solo del lado que toca la página.

El panel lateral es una columna, no una tarjeta, y por eso su escala es distinta a la del modal. En el móvil (por debajo de 40rem) se queda en min(20rem, 85vw) sea cual sea el tamaño: una columna estrecha ahí no se lee, y la franja que sobra muestra que la página sigue detrás. Los botones del pie ocupan la fila, como en el modal.

Teclado y accesibilidad

Es un <dialog> abierto con showModal(), igual que el modal: la página de detrás queda inerte, el foco no escapa y vuelve a quien lo abrió al cerrarse.

Con title, el panel recibe aria-labelledby. La X es un .tuc-btn con aria-label="Fechar". Con prefers-reduced-motion, la entrada dura 100 ms y no se desliza.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.