COMPONENTE - JDA-AVISO

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-aviso es un componente de aviso configurable que permite definir su apariencia e información mostrada de acuerdo con las necesidades de la aplicación.

<jda-aviso         
        [titulo]="'Aviso'"
        [descripcion]="'Texto con una frase mas corta.'"
        [identificador]="'aviso-1'"
        [icono]="'aviso1-icono'"
        [tipo]="'success'"
        [esFijo]="false"
        (evento)="onButtonClick($event)">
</jda-aviso>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | titulo | Input | string | No | Titulo que se mostrará en el aviso. | | descripcion | Input | string | No | Descripción que se mostrará en el aviso. | | identificador | Input | string | Sí | Identificador del aviso. | | icono | Input | string | Si | *Icono que aparece a la izquierda del aviso. | | tipo | Input | string | Sí | Tipo de aviso, pudiendo ser 'info, success, error o warning'. | | esFijo | Input | boolean | Sí | Muestra el botón para cerrar o no el aviso. | | evento | Output | EventEmitter | Sí | Cada vez que se clica, envía un evento con el identificador del aviso. | * Los iconos que aparecen se obtienen del listado de iconos de Material Angular, encontrados en el este enlace.

Cómo importarlo en tu proyecto

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