Componente Modal para Angular | ng-hub-ui-modal
Componente modal accesible para Angular con apilado, modo fullscreen, plantillas, manejo de teclado y variables CSS para apps standalone.
Visión General
Por qué los equipos buscan esta librería
Este componente modal para Angular está pensado para equipos que necesitan diálogos accesibles, contenido componible, control por servicio y estilos compatibles con design systems en aplicaciones standalone.
Instalación
npm install ng-hub-ui-modalIr a
Ideal para
- diálogos de confirmación
- formularios en overlay
- paneles de detalle
- flujos apilados
Sobre modal
ng-hub-ui-modal resuelve una de las necesidades UI más comunes en productos Angular: abrir diálogos que se comporten de forma robusta en producción. Cubre modales apilados, flujos fullscreen, control por teclado, proyecciones y uso basado en servicios sin convertir la lógica modal en un problema de cada proyecto.
Guías de uso
Apertura de modales (tipos de contenido)
Muestra cómo abrir modales con contenido basado en TemplateRef, Component o String.
Configuración y opciones
Personaliza la apariencia y el comportamiento del modal
Referencia modal (HubModalRef)
Controla y accede al estado de los modales abiertos
Modal activo (HubActiveModal)
Interactúa con el modal desde su propio contenido
Gestión del stack
Gestiona varios modales apilados
Características clave
Flujos con modales apilados
Abre y gestiona varios diálogos con seguridad cuando el producto necesita decisiones anidadas o flujos encadenados.
Comportamiento accesible de diálogo
Incluye gestión del foco, soporte de escape, control del backdrop y semántica de diálogo compatible con ARIA.
Plantillas y control por servicio
Funciona con plantillas y componentes dinámicos para componer flujos de confirmación, formularios y vistas de detalle.
Cambios recientes
Version 21.0.2 - 3/31/26, 12:00 AM
changed: Standardized padding variables and improved fullscreen layout responsiveness.
Version 21.0.1 - 3/19/26, 12:00 AM
changed: Removed hardcoded design system token defaults from stylesheet; all --hub-modal-* variables retain literal fallback values.
fixed: Fixed modal-backdrop and modal unit test reliability.
Version 21.0.0 - 3/10/26, 12:00 AM
added: HubModalPlacement configuration for anchored modal positioning.
changed: BREAKING: Standardized CSS class names to hub-modal BEM convention.
Version 1.2.0 - 1/7/25, 12:00 AM
added: Documentation and examples update