Skip to main content

AlpuraDetailComponent - Guía de Uso

El AlpuraDetailComponent es un panel lateral (offcanvas) que permite mostrar hasta 3 tarjetas de contenido dinámico, ajustando automáticamente su tamaño y visibilidad según la cantidad de contenido.

📦 Importación​

import { AlpuraDetailComponent } from '@alpura/commons';

🧩 Uso Básico​

Puedes envolver contenido con atributos card-uno, card-dos y card-tres para mostrar hasta tres tarjetas dentro del panel lateral.

<alpura-detail maxWidth="600px" minWidth="300px" width="30%">
  <div card-uno>
    <!-- Contenido para la primera tarjeta -->
    <p>Detalle principal aquí</p>
  </div>
  <div card-dos>
    <!-- Contenido para la segunda tarjeta (opcional) -->
    <p>Detalle adicional</p>
  </div>
  <div card-tres>
    <!-- Contenido para la tercera tarjeta (opcional) -->
    <p>Otra información</p>
  </div>
</alpura-detail>

⚙️ Control desde TypeScript​

Para mostrar el panel lateral y asignar el título dinámico, usa el servicio AlpuraDetailViewModel:

private vmAlpuraDetail = inject(AlpuraDetailViewModel);

mostrarDetalle() {
  this.vmAlpuraDetail.showDetail('Título dinámico').afterClosed.subscribe(resultado => {
    console.log('Offcanvas cerrado con resultado:', resultado);
  });
}

🔄 Uso de afterClosed y método close​

El método showDetail(title: string) del servicio AlpuraDetailViewModel abre el panel lateral y retorna un objeto con la propiedad afterClosed, un Observable que emite cuando el panel se cierra.

Esto es útil para ejecutar acciones al cerrar el detalle, como procesar datos devueltos.

Por otro lado, el método close(result?: unknown) cierra el panel y puede enviar un resultado opcional que será emitido por afterClosed.

Ejemplo de uso​

// Abrir el detalle con un título y escuchar cuando se cierre
this.vmAlpuraDetail
  .showDetail("Editar Propiedad")
  .afterClosed.subscribe((result) => {
    console.log("Panel cerrado con resultado:", result);
    // Aquí puedes procesar el resultado, por ejemplo actualizar datos en la UI
  });

// En el componente mostrado dentro del offcanvas, cerrar y enviar resultado:
this.vmAlpuraDetail.close({ saved: true, data: this.form.value });

🛠 Personalización​

  • width, minWidth y maxWidth son inputs para ajustar el ancho del panel.
  • Las tarjetas vacías se ocultan automáticamente.
  • El layout se adapta para mostrar 1, 2 o 3 tarjetas según el contenido.

🚀 Resultado esperado​

  • Un panel lateral que se muestra y oculta mediante programación para mostrar detalles de un elemento.
  • Capacidad para mostrar contenido dinámico en hasta tres tarjetas separadas.
  • Ajuste automático del layout para 1, 2 o 3 tarjetas, ocultando las que no tienen contenido.
  • Control centralizado a través del servicio AlpuraDetailViewModel para abrir, cerrar y pasar datos.
  • Comunicación bidireccional gracias al observable afterClosed, que permite recibir un resultado cuando el panel se cierra.
  • Mejora la experiencia de usuario al presentar información detallada sin necesidad de navegar a otra página.

📬 Soporte​

Para soporte o dudas sobre este componente, contactar al equipo de arquitectura.