Offcanvas
Un panel deslizante — usado para navegación móvil, cajones de filtros, o
cualquier contenido que deba quedar fuera de pantalla hasta que se
active. Soporta dos modos de apertura: un panel estándar (se desliza
desde un borde) o un popup (abierto por un selector, ej. un elemento
disparador personalizado en otra parte de la página).
Props
| Prop | Tipo | Default | Notas |
|---|---|---|---|
ariaLabel | string | "Offcanvas" | Nombre accesible del panel. |
backdrop | boolean | true | Muestra un fondo atenuado detrás del panel mientras está abierto. |
Grupo panel | |||
panel.showInTheEditor | boolean | true | Mantiene el panel visible mientras se edita en Etch. |
panel.width | string | "380px" | Ancho del panel. |
panel.separated | boolean | true | Añade separación visual del borde (ej. margen/sombra) en vez de un panel a ras de borde a borde. |
panel.position | select | "right" | Desde qué borde se desliza el panel. |
panel.entry | select | "default" | Estilo de animación de entrada. |
panel.heightAuto | boolean | false | La altura del panel se ajusta a su contenido en vez de llenar el viewport. |
(visible cuando panel.heightAuto está activo) | condition | ||
panel.bottom | boolean | false | Ancla el panel de altura automática abajo en vez de arriba. |
Grupo popup | |||
popup.openWithSelector | boolean | false | Abre el panel desde un disparador arbitrario en otra parte de la página en vez del disparador por defecto. |
(visible cuando popup.openWithSelector está activo) | condition | ||
popup.selector | string | — | Selector CSS del elemento disparador personalizado. |
popup.hideTrigger | boolean | true | Oculta el disparador propio del componente al usar un selector personalizado. |
Un componente complementario, Fancy offcanvas Close, aporta el botón/icono de cierre usado dentro del panel.
Nota
Esta página cubre las props actuales del componente. Una guía completa — como la de Acordeón — llegará a medida que este componente se re-verifique en una conversión activa.