Librería de Utilidades para Angular | ng-hub-ui-utils
Librería de utilidades para Angular con pipes, focus management, overlays, transiciones y helpers de traducción compartidos entre componentes reutilizables.
Visión General
Por qué los equipos buscan esta librería
Usa esta librería de utilidades para Angular para no reescribir las piezas de bajo nivel detrás de overlays, focus traps, helpers de traducción y utilidades comunes de plantilla.
Instalación
npm install ng-hub-ui-utilsIr a
Ideal para
- infraestructura UI compartida
- sistemas overlay
- focus management
- helpers de plantilla
Sobre utils
ng-hub-ui-utils es la base compartida detrás de muchos patrones reutilizables de UI. Resulta útil cuando los equipos Angular quieren centralizar las piezas de bajo nivel que mantienen consistentes los sistemas de overlay, la gestión del foco, los pipes y los helpers de traducción entre proyectos.
Guías de uso
Gestión del foco
Atrapa y gestiona el foco del teclado dentro de elementos
Ejemplos:
Focus Trap
Mantén el foco dentro de un modal o diálogo usando hubFocusTrap().
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Elementos enfocables
Obtén los elementos enfocables de los extremos con getFocusableBoundaryElements().
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Internacionalización (i18n)
Servicios y pipes de traducción para soporte multiidioma
Ejemplos:
Servicio de traducción
HubTranslationService para gestionar traducciones
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Pipe de traducción
TranslatePipe para traducciones en templates
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Proveedor de traducción
provideHubTranslations() para la configuración de la app
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Overlay System
Crea overlays posicionados y elementos flotantes
Ejemplos:
Servicio de overlay
HubOverlayService para crear overlays de forma programática
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Referencia de overlay
OverlayRef para gestionar el ciclo de vida del overlay
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Posicionamiento
ConnectionPositionPair para un posicionamiento flexible
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Servicio popup
Gestión simplificada de popups
Ejemplos:
Creación de popup
HubPopupService para crear popups rápidamente
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Pipes
Pipes de utilidad para templates
Ejemplos:
Pipes de comprobación de tipo
IsStringPipe, IsObjectPipe, IsObservablePipe
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
GetPipe
Accede a propiedades anidadas usando notación punto
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
UcfirstPipe
Convierte en mayúscula la primera letra de un string
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
UnwrapAsyncPipe
Desempaqueta observables y promesas en templates
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Funciones de utilidad
Funciones helper de propósito general
Ejemplos:
Type guards
isString(), isNumber(), isDefined(), isPromise()
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Utilidades de strings
removeAccents(), interpolateString(), regExpEscape()
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Utilidades de objetos
equals() for deep comparison, getValue() for dot notation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Utilidades del DOM
closest(), reflow(), getActiveElement()
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Utilidades RxJS
runInZone() operator for NgZone integration
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Utilidades de scrollbar
Mide y compensa el ancho del scrollbar
Ejemplos:
Ancho del scrollbar
Funciones scrollbarWidth() y scrollbarPadding()
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Transiciones
Helpers de transición CSS
Ejemplos:
Ejecutar transición
hubRunTransition() para transiciones CSS programáticas
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Características clave
Primitivas de overlay y popup
Aporta los bloques de construcción de bajo nivel necesarios para interfaces flotantes y patrones de renderizado desacoplado.
Utilidades de focus management
Gestiona focus traps y patrones de interacción seguros con teclado en diálogos y overlays.
Pipes y helpers de traducción
Centraliza helpers de plantilla, formateo y utilidades ligeras de traducción usadas por componentes Angular.
Cambios recientes
No hay entradas de changelog disponibles.