COMPONENTE - JDA-MODAL

Introducción

En la Agencia Digital de Andalucía, estamos trabajando en la unificación de estilos y componentes para las webs de la Junta de Andalucía, con el objetivo de proporcionar una experiencia de usuario coherente y homogénea en todas nuestras plataformas digitales. Para lograrlo, hemos adoptado Angular como tecnología base y estamos desarrollando una biblioteca de componentes reutilizables que aseguren un estilo visual y funcional unificado en todos los proyectos.

Este trabajo se basa en el Modelo de Servicios Digitales, que nos guía en el diseño y la implementación de componentes que cumplen con estándares de accesibilidad, usabilidad y eficiencia. Gracias a este enfoque, cualquier proyecto puede integrar fácilmente componentes predefinidos y alineados con las directrices de estilo de la Junta de Andalucía. Puedes explorar el catálogo completo de componentes disponibles aquí.

Componente

El jda-modal es un componente de modal configurable que permite definir la información mostrada de acuerdo con las necesidades de la aplicación. Dentro de los selectores (jda-modal) se pueden inlcuir los elementos a preferencia del desarrolador.

<jda-modal *ngIf="habilitarModal" 
  [tituloModal]="'Se ha creado al usuario correctamente'" 
  [habilitarCierre]="true" 
  (modalCerrado)="onButtonClick($event)">
    <div style="display: flex; flex-direction: column;">
      <p>El usuario se ha creado correctamente.</p>
    </div>
</jda-modal>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | tituloModal | Input | string | Sí | Titulo que se mostrará en el modal. | | habilitarCierre | Input | boolean | Sí | Mostrar o no el botón para cerrar el modal. | | modalCerrado | Output | EventEmitter | Sí | Cada vez que se clica en el botón de cerrar, ejecuta un método a preferencia para cerrar el modal. |

Cómo importarlo en tu proyecto

1. Instalar la dependencia del componente botón usando el siguiente comando: npm install jda-modal.
2. Añadir el componente al módulo correspondiente donde se vaya a usar (import { JdaModalComponent } from 'jda-modal').
3. Llamar al componente con sus respectivos parámetros para pintarlo en pantalla.