COMPONENTE - JDA-BUTTON

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

<jda-button
  [texto]="'Enviar'"
  [tipo]="'principal'"
  [identificador]="'btn-enviar'"
  [iconoIzq]="'icono-izquierdo'"
  [iconoDer]="'icono-derecho'"
  [loading]="false"
  [disabled]="false"
  (evento)="onButtonClick($event)"
></jda-button>

| Nombre del parámetro | Tipo de parámetro | Tipo | Requerido | Descripción | |-------------- |-------------- |-------------- |-------------- |-------------------------------------------------------------------------- | | texto | Input | String | Sí | Texto que se quiere mostrar en el botón. | | tipo | Input | String | Sí | Existen dos tipos de botones: 'principal' y 'secondary' | | identificador | Input | String | Sí | Identificador del botón. | | iconoIzq | Input | String | No | *Icono que aparece a la izquierda del texto. | | iconoDer | Input | String | No | *Icono que aparece a la derecha del texto. | | loading | Input | Boolean | No | Muestra el botón en estado de carga y estado deshabilitado | | disabled | Input | Boolean | No | Muestra el botón en estado deshabilitado | | evento | Output | EventEmitter | Sí | Cada vez que se clica, envía un evento con el identificador del botón |

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