Componentes · Interacción

Offcanvas (fuera de pantalla)

Despliega navegación, filtros o contenido complementario desde un borde sin abandonar la vista actual.

v2.0

Entrada lateral

El panel aparece desde la derecha o izquierda.

Dialog nativo

Conserva backdrop, foco modal y cierre con Escape.

Módulo opcional

Los atributos conectan activadores y cierres.

Código + resultado

Ejemplo aplicado de Offcanvas

El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

<div class="display-flex flex-center">
  <button class="btn btn-primary" type="button" data-qy-offcanvas-open="component-doc-offcanvas">
    Abrir panel lateral
  </button>
  <dialog class="q-offcanvas rounded-l-20 shadow-box-xl" id="component-doc-offcanvas" aria-labelledby="component-doc-offcanvas-title">
    <div class="q-offcanvas__layout">
      <div class="q-offcanvas__header">
        <h2 id="component-doc-offcanvas-title">
          Navegación
        </h2>
        <button class="btn-ico btn-light btn-fs-04 rounded-100" type="button" aria-label="Cerrar" data-qy-offcanvas-close>
          ×
        </button>
      </div>
      <div class="q-offcanvas__body">
        <p>
          Explora la documentación, las utilidades y los componentes disponibles en QuicklyCSS V2.
        </p>
      </div>
      <div class="q-offcanvas__footer">
        <button class="btn btn-primary btn-fs-04" type="button" data-qy-offcanvas-close>
          Cerrar panel
        </button>
      </div>
    </div>
  </dialog>
</div>

Componente real

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

Clases disponibles

La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

Clase o atributo	Función	Uso recomendado
`.q-offcanvas`	Panel	Diálogo lateral base.
`.shadow-box-xl`	Sombra opcional	Eleva el panel lateral sobre el contenido.
`.q-offcanvas--left`	Dirección	Abre el panel desde la izquierda.
`.q-offcanvas__layout`	Estructura	Organiza el panel verticalmente.
`.q-offcanvas__header`	Cabecera	Título y botón de cierre.
`.q-offcanvas__body`	Contenido	Área desplazable principal.
`.q-offcanvas__footer`	Pie	Acciones secundarias del panel.
`.btn`	Botón base	Clase compartida de los controles.
`.btn-primary`	Acción principal	Abre o confirma una acción.
`.btn-light`	Acción secundaria	Cierra sin destacar.
`.btn-ico`	Botón de icono	Control circular de cierre.
`.btn-fs-04`	Escala	Ajusta el tamaño de las acciones.
`.display-flex`	Layout auxiliar	Activa el contenedor flexible del activador.
`.flex-center`	Alineación	Centra el activador en el área de resultado.
`data-qy-offcanvas-open`	Hook JS	Abre el panel indicado.
`data-qy-offcanvas-close`	Hook JS	Cierra el panel contenedor.
`.bc-{token}`	Color de acento	Sincroniza el título y el control de cierre.
`.rounded-l-20`	Radio lateral	Redondea el borde interior del panel derecho.
`.rounded-100`	Control circular	Redondea completamente el botón de cierre.

Recomendaciones

Buenas prácticas de Offcanvas

Una función clara

Dedica cada panel a navegación, filtros o una herramienta concreta.

Cierre visible

Incluye un control de cierre además de Escape y backdrop.

Título asociado

Conecta el diálogo con un encabezado mediante aria-labelledby.

Móvil primero

Comprueba ancho, scroll interior y alcance táctil.