COMPONENTE - JDA-LEYENDA

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-Leyenda es un componente de botón configurable que permite definir su apariencia y comportamiento de acuerdo con las necesidades de la aplicación.

<jda-leyenda
    [leyendaPrincipal]="{
    identificador:'totalRemision',
    numero: 22,
    texto: 'Total de remisiones',
    color: ''
  }"
    [leyendaSecundaria]="{
    identificador:'aprobadas',
    numero: 14,
    texto: 'Aprobadas',
    color: '#2ABC67'
  }"
    [leyendaTituloPrincipal]="'titulo principal'"
    [leyendaTituloSecundario]="'titulo secundario'"
    (evento)="onLeyendaClick($event)"
></jda-leyenda>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | leyendaPrincipal | Input | LeyendaDTO | No | leyendaPrincipal, comnjunto de opciones para mostrar la leyenda principal | | leyendaSecundaria | Input | LeyendaDTO | No | leyendaSecundaria, comnjunto de opciones para mostrar la leyenda secundaria | | leyendaTituloPrincipal | Input | String | No | leyendaTituloPrincipal para agregar un titulo a la leyenda. | | leyendaTituloSecundario | Input | String | No | leyendaTituloSecundario para agregar un titulo a la leyenda. | | evento | Output | EventEmitter | Sí | Cada vez que se clica, envía un evento con el identificador del botón |

Donde el parámetro LeyendaDTO consta de: | Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | identificador | Input | String | Sí | identificador se requiere para identeficar cada. | | numero | Input | number | Sí | numero se requiere para mostrar el numeros para cada leyenda. | | texto | Input | String | Sí | texto se requiere para mostrar a que está relazionada esta leyenda. | | color | Input | String | No | color Se agregar una color para diferenciar las leyenda. |

Cómo importarlo en tu proyecto

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