Day 24 - Component de Alerta Parte 3 - Agregar una Barra de Alerta para cambiar estilos: en esta entrega continuamos el desarrollo de un componente de alertas que permite mostrar u ocultar el boton de cierre, cambiar el estilo y modificar la direccion de los avisos. La idea es ofrecer una barra de controles que manipule propiedades como hasCloseButton, style y direction y que funcione de forma coherente en Vue 3, SvelteKit y Angular 20.
Resumen de cambios y flujo general: crear un icono Close reutilizable, importarlo en cada implementacion de alerta y mostrar un boton de cierre condicionalmente. Añadir un componente AlertBar que expone controles: un checkbox para mostrar u ocultar el boton de cierre y dos listas desplegables para elegir estilo y direccion. El estado se enlaza en dos sentidos desde la barra hacia la lista de alertas y finalmente cada alerta recibe un objeto de configuracion alertConfig que determina si muestra el boton, cual es su estilo y su orientacion.
Vue 3: crear un componente icons/CloseIcon.vue y luego importarlo en Alert.vue para renderizar el icono en el boton de cierre. En el AlertBar usar defineModel para habilitar v-model de forma moderna, por ejemplo v-model:hasCloseButton para el checkbox y v-model:style y v-model:direction para los selects. En el componente que lista las alertas declarar referencias hasCloseButton, style y direction y construir un alertConfig computed que se pasa como prop a cada Alert. Dentro de Alert definir props para alertConfig y type y calcular clases con computed para color, estilo y direccion y aplicarlas en class para controlar aspecto y layout.
SvelteKit Svelte 5: crear un componente lib/icons/close-icon.svelte y usarlo dentro de alert.svelte. Para enlace bidireccional usar $bindable junto con $props, por ejemplo let hasCloseButton = $bindable() y en el padre usar bind:hasCloseButton. Para style y direction aplicar bind:value en los selects y propagar esos valores hacia cada alerta. En el alert component definir propiedades hasCloseButton, style y direction, y usar derived para componer las clases finales que se aplican al elemento role alert.
Angular 20: crear un CloseIconComponent con un template SVG y registrar el componente en imports del AlertComponent para usarlo en la plantilla. Para enlace bidireccional entre AlertBar y AlertList usar model signals y la sintaxis banana in the box para binding, por ejemplo [(hasCloseButton)]=hasCloseButton. AlertBar declara model signals para style y direction y recibe un input config con las etiquetas y las listas de opciones. AlertList mantiene signals style, direction y hasCloseButton y calcula alertConfig con computed para pasar al Alert. El AlertComponent expone alertConfig como input requerido y usa computed para derivar alertClasses que se aplican al atributo class del contenedor.
Detalle de la UI y comportamiento: el checkbox Has close button activa o desactiva la visualizacion del boton; los selects Alert styles y Alert direction permiten elegir entre estilos como color, soft, outline o dash y entre orientaciones horizontal o vertical. Al cambiar cualquiera de estos controles las alertas existentes actualizan su aspecto inmediatamente gracias al enlace reactivo entre AlertBar y AlertList y a las propiedades que recibe cada Alert.
Por que esto importa para proyectos profesionales: una barra de configuracion de alertas acelera pruebas de UX y facilita la personalizacion en aplicaciones a medida y software a medida. Este tipo de componentes modulares y reactivos encajan perfectamente en proyectos donde se requiere escalabilidad, integracion con servicios cloud o adaptacion a canal movil y escritorio.
En Q2BSTUDIO somos especialistas en desarrollo de software y aplicaciones a medida y ofrecemos servicios que cubren todo el ciclo desde el diseño de componentes hasta la integracion con infraestructuras cloud. Si quieres impulsar un proyecto con componentes reutilizables y experiencia en frameworks modernos podemos ayudarte con soluciones de desarrollo de aplicaciones y software a medida y estrategias de despliegue en la nube.
Ademas, en proyectos que requieren expansion hacia inteligencia artificial y automatizacion de decisiones disponemos de servicios de IA para empresas, agentes IA y analitica avanzada. Integramos capacidades de inteligencia de negocio y visualizacion con Power BI para transformar datos en insights accionables. Conozca nuestras propuestas en inteligencia artificial y como podemos aplicar modelos y agentes para mejorar la experiencia de usuario y la automatizacion en su producto servicios de inteligencia artificial.
Servicios complementarios: seguridad y despliegue. Para entornos productivos ofrecemos practicas de ciberseguridad y pentesting, asi como despliegue en servicios cloud aws y azure y soporte continuo para garantizar disponibilidad y cumplimiento. Tambien brindamos servicios de inteligencia de negocio y power bi para dar sentido a los datos y acelerar la toma de decisiones.
Conclusiones practicas: implementar una barra de alerta con controles para mostrar u ocultar el boton de cierre, cambiar estilo y direccion mejora la flexibilidad del componente y facilita la adaptacion a disenos corporativos. La misma logica se puede replicar en Vue 3, Svelte 5 y Angular 20 respetando las convenciones de cada framework para binding y props. Si necesitas apoyo para integrar estos patrones en un proyecto real, Q2BSTUDIO ofrece consultoria y desarrollo completo para llevarlo a produccion.
Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
.jpg)
