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í.
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.
- Instalar la dependencia del componente botón usando el siguiente comando:
npm install jda-button. - Añadir el componente al módulo correspondiente donde se vaya a usar (
import { JdaButtonComponent } from 'jda-button'). - Llamar al componente con sus respectivos parámetros para pintarlo en pantalla.