# Offcanvas (fuera de pantalla)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-offcanvas.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Interacción

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.

i
## Contenido complementario
Utiliza Offcanvas para navegación o herramientas secundarias. La tarea principal debe seguir siendo comprensible cuando el panel está cerrado.

Código + resultado

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

HTML

```html
<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>
```

Resultado aplicado   Offcanvas · panel lateral

Componente real

## Navegación

Explora la documentación, las utilidades y los componentes disponibles en QuicklyCSS V2.

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

01
### Una función clara
Dedica cada panel a navegación, filtros o una herramienta concreta.

02
### Cierre visible
Incluye un control de cierre además de Escape y backdrop.

03
### Título asociado
Conecta el diálogo con un encabezado mediante aria-labelledby.

04
### Móvil primero
Comprueba ancho, scroll interior y alcance táctil.