backdrop

Paquete: @tiendana/ngx-core/ui

Fondo oscuro semitransparente que cubre toda la pantalla. Se usa automáticamente en drawer y puede usarse en modales, diálogos, etc.

Características

✅ Posición fija que cubre todo el viewport
✅ Background rgba(0, 0, 0, 0.7) por defecto
✅ z-index 4 (drawer usa z-index 5)
✅ Template vacío - solo estilos visuales
✅ Evento onClick (deprecated - usa (click) nativo)

API

Outputs

Output	Tipo	Descripción
onClick	EventEmitter<MouseEvent>	Deprecated - Usa (click) nativo en su lugar

Evento Deprecated

El evento onClick será eliminado en futuras versiones. Usa el evento nativo (click) de Angular:

// ❌ Deprecated
<backdrop (onClick)="close()" />

// ✅ Recomendado
<backdrop (click)="close()" />

Uso

Con Drawer (Automático)

El componente drawer incluye backdrop automáticamente cuando se abre:

<drawer #myDrawer>
  <!-- Contenido -->
</drawer>

No necesitas agregar <backdrop> manualmente.

En Modales Personalizados

@if (showModal()) {
  <backdrop (click)="closeModal()" />
  
  <div class="modal">
    <h2>Modal Title</h2>
    <p>Contenido del modal</p>
    <button (click)="closeModal()">Cerrar</button>
  </div>
}

Backdrop Sin Cierre

<!-- No emite eventos - solo visual -->
<backdrop />

<div class="loading-spinner">
  <p>Cargando...</p>
</div>

Estilos

:host {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 4;
}

Personalización

Puedes sobrescribir los estilos con CSS:

backdrop {
  background: rgba(0, 0, 0, 0.5); // Más claro
}

// O usar una clase custom
backdrop.light {
  background: rgba(255, 255, 255, 0.9);
}

z-index Hierarchy

Backdrop: z-index 4
Drawer:   z-index 5
Modal:    z-index 6 (recomendado)
Tooltip:  z-index 10 (recomendado)

Accesibilidad

• Agrega role="presentation" si es puramente visual
• Para modales, usa aria-modal="true" en el contenedor del modal
• Considera trap focus dentro del modal activo