drawer

Paquete: @tiendana/ngx-core/ui

Panel lateral deslizante que aparece desde el lado derecho de la pantalla con animación suave. Incluye backdrop automático que cierra el drawer al hacer clic.

Características

✅ Animación suave con cubic-bezier
✅ Backdrop integrado con cierre automático
✅ Ancho configurable vía input signal
✅ Control programático con open() y close()
✅ Eventos onOpen y onClose
✅ Max-width 80% para responsive

API

Inputs

Input	Tipo	Default	Descripción
width	InputSignal<string>	'900px'	Ancho del drawer en px, rem, etc.

Outputs

Output	Tipo	Descripción
onClose	OutputEmitterRef<void>	Emite cuando el drawer se cierra
onOpen	OutputEmitterRef<void>	Emite cuando el drawer se abre

Signals

Signal	Tipo	Descripción
isOpen	WritableSignal<boolean>	Estado de apertura del drawer

Métodos

Método	Descripción
open()	Abre el drawer y emite onOpen
close()	Cierra el drawer y emite onClose (solo si está abierto)

Ejemplos y Demos

Uso Básico

Cargando demo...

Ver código

Con Ancho Personalizado

Cargando demo...

Ver código

Con Formulario y Eventos

Cargando demo...

Ver código

Estilos

El drawer usa CSS custom properties para el ancho:

.drawer__side {
  position: fixed;
  z-index: 5;
  background-color: var(--bg-1dp);
  height: 100%;
  width: var(--drawer-width); // Desde el input width
  max-width: 80%;
  right: calc(calc(var(--drawer-width) + 100px) * -1);
  top: 0;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: right;

  &--open {
    right: 0;
  }
}

Accesibilidad

• Agrega aria-label al drawer para lectores de pantalla
• El backdrop se puede cerrar con clic
• Considera agregar soporte para tecla Escape