COMPONENTE - JDA-HEADER

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-header es un componente de una cabecera configurable que permite definir su apariencia y opciones de acuerdo a las necesidades del proyecto.

<jda-header
  (evento)="manejadorEventos($event)"
  [headerInput]='{
    "nombre": "HERRAMIENTA DE REMISIÓN DE EXPEDIENTES",
    "logo": "assets/imgs/logo_junta.png",
    "descripcion": "Junta de Andalucia",
    "secciones": [
      {
        "nombre:" "Inicio",
        "identificador": "INICIO",
        "icono": "home",
        "imagen:" "null",
        "url": "inicio"
      },{
        "nombre": "Ayuda",
        "identificador": "AYUDA",
        "icono": "info",
        "imagen:" "null",
        "url": "ayuda"
      }, {
        "nombre": "Componentes",
        "identificador": "COMPONENTES",
        "icono": "build",
        "imagen": "null",
        "url": "componentes"
      }, {
        "nombre": "Ajustes",
        "identificador": "AJUSTES",
        "icono": "settings",
        "imagen": "null",
        "url": "ajustes"
      }
    ],
    "perfil":
      {
        "nombre": "Esteban",
        "icono":"person",
        "identificador": "PERFIL",
        "opciones":[
          {
            "descripcion":"Pérez Rodriguez, Juan Esteban",
            "ruta":"",
            "icono":"",
            "disabled":false,
            "grupo":"grupo1",
          },
          {
            "descripcion":"(Último acceso: 22 noviembre 2024, 14:54)",
            "ruta":"",
            "icono":"",
            "disabled":true,
            "grupo":"grupo1",
          },
          {
            "descripcion":"Jefe de Servicio SGFS",
            "icono":"person",
            "ruta":"",
            "disabled":false,
            "grupo":"grupo2",
          },
          {
            "descripcion":"Consejería de Hacienda, Industria y Energía",
            "icono":"",
            "ruta":"",
            "disabled":false,
            "grupo":"grupo2",
          },
        ]
      }
  }'
></jda-header>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | nombre | Input | String | Sí | Texto principal en color verde. | | descripcion | Input | String | No | Texto secundario en color negro. | | logo | Input | String | No | Imagen que aparece a la izquierda. | | secciones | Input | SeccionDTO | No | Conjunto de opciones para cambiar de pantalla. | | perfil | Input | PerfilDTO | No | Conjunto de opciones para mostrar un menu desplegable. | | evento | Output | EventEmitter | Sí | Cada vez que se clica, envía un evento con el identificador del botón |

Donde el parámetro SeccionDTO consta de:

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | nombre | Input | String | Sí | Nombre de la sección. | | identificador | Input | String | Sí | Identificador de la sección. | | icono | Input | String | No | *Icono de la sección. | | imagen | Input | String | No | Imagen de la sección. | | url | Input | String | Sí | Dirección a la que va a redirigir. |

Donde el parámetro PerfilDTO consta de:

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | nombre | Input | String | Sí | Nombre de usuario | | icono | Input | String | Si | *Icono para mostrar con el nombre de usuaior. | | identificador | Input | String | Sí | Identificador del perfil. | | opciones | Input | opcionesDTO | No | Conjunto de opciones para el perfil. |

Donde el parámetro opcionesDTO consta de:

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | descripcion | Input | String | Sí | Texto para mostrar en la opción del menu desplegable. | | icono | Input | String | No | *Icono de la opciones del menu desplegable. | | ruta | Input | String | No | Permite redireccionar. | | disabled | Input | boolean | No | Permite mostrar la opcion deshabilitada | | grupo | Input | String | No | Permite agrupa las opciones del menu desplegable. |

* 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-header@latest.
2. Añadir el componente al módulo correspondiente donde se vaya a usar (import { JdaHeaderComponent } from 'jda-header').
3. Llamar al componente con sus respectivos parámetros para pintarlo en pantalla.