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 leyenda configurable que permite definir su apariencia y datos mostrados de acuerdo con las necesidades de la aplicación.

<jda-leyenda
    [leyendaPrincipal]="this.leyendaPrincipal1"
    [leyendaSecundaria]="this.leyendaSecundaria1"
></jda-leyenda>

 leyendaPrincipal = {
    numero: 22,
    texto: 'Total de remisiones',
    color: ''
  };

  leyendaSecundaria = [{
    numero: 14,
    texto: 'Aprobadas',
    color: '#2ABC67'
  },{
    numero: 8,
    texto: 'Rechazadas',
    color: '#F0AD4E'
  }]; 

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | leyendaPrincipal | Input | Object | No | Objeto que contiene las propiedades para la leyenda principal (recuadro independiente). | | leyendaSecundaria | Input | Object[] | No | Array de objetos que contienen las propiedades para la leyenda secundaria. | | *numero | number | string | Sí | Número a representar dentro de la leyenda. | | *texto | string | string | Si | Texto a mostrar dentro de la leyenda. | | *color | string | string | No | Color del icono opcional a representar al lado del texto de la leyenda. |

* Parámetros que se definen en un objeto creado por el usuario.

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.