Componente Accordion para Angular | ng-hub-ui-accordion
Componente accordion accesible para Angular, pensado para FAQs, paneles de ajustes y contenido desplegable con navegación por teclado y variables CSS.
Visión General
Por qué los equipos buscan esta librería
Utiliza este componente accordion para Angular cuando necesites patrones de disclosure accesibles, navegación por teclado, flexibilidad con plantillas y theming mediante variables CSS sin arrastrar un framework pesado.
Instalación
npm install ng-hub-ui-accordionIr a
Ideal para
- secciones FAQ
- paneles de ajustes
- formularios avanzados
- interfaces de disclosure progresivo
Sobre accordion
ng-hub-ui-accordion ofrece a los equipos Angular un componente reutilizable para FAQs, formularios avanzados y zonas de configuración. Funciona bien en aplicaciones standalone, soporta interacción por teclado y mantiene el estilo bajo control con propiedades CSS personalizadas.
Guías de uso
Core Features
Essential accordion functionality built with modern Angular Signals architecture.
Ejemplos:
Configuración básica
Configuración básica
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Expansión múltiple de paneles
Expansión múltiple de paneles
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Form Integration
Complete form integration with Angular's reactive forms and template-driven forms through ControlValueAccessor.
Ejemplos:
Formularios reactivos
Formularios reactivos
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Formularios template-driven
Formularios template-driven
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Bind value
Bind value
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Plantillas personalizadas
Rich header customization with the hubAccordionPanelHeader directive for complex interactive headers.
Ejemplos:
Plantillas de cabecera personalizadas
Plantillas de cabecera personalizadas
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Cabeceras interactivas complejas
Cabeceras interactivas complejas
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Configuración avanzada
Advanced features including flush mode, dynamic panels, and custom comparison functions.
Ejemplos:
Flush Mode
Flush Mode
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Dynamic Panels
Dynamic Panels
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Custom Value Comparison
Custom Value Comparison
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Accessibility Features
Built-in accessibility features following WCAG 2.1 AA guidelines with full keyboard navigation and screen reader support.
Ejemplos:
Keyboard Navigation
Keyboard Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Accessibility Features
Accessibility Features
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Características clave
Flujo accesible por teclado
Soporta gestión predecible del foco, semántica ARIA y navegación por teclado para interfaces desplegables.
Ideal para formularios Angular
Organiza formularios densos y flujos de disclosure progresivo sin reescribir lógica de accordion en cada proyecto.
Theming con variables CSS
Ajusta espaciados, cabeceras, bordes y colores de estado mediante tokens CSS compatibles con design systems.
Cambios recientes
Version 21.1.1 - 3/19/26, 12:00 AM
fixed: Fixed bindValue not applied in value comparison and storage. Added getComparableValue() and readByPath() helpers.
fixed: CSS variable declarations now bundled via styleUrl — no manual stylesheet import required.
removed: Removed orphaned src/lib/styles/accordion.scss. Updated README and css-variables-reference.md.
Version 21.1.0 - 3/9/26, 12:00 AM
added: CSS variables reference documentation.
changed: Replaced hardcoded values with sys/ref token system.
Version 19.0.6 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples
added: Multiple expansion example component
added: Reactive forms integration example with real-time value display
added: Template-driven forms example component
added: Custom header templates example with icons and badges
added: Complex interactive headers example with order management
added: Flush (borderless) mode example component
added: Dynamic panels example with add/remove functionality
added: Custom value comparison example for complex objects
added: Accessibility example with ARIA and keyboard navigation
added: Live functional examples in documentation with syntax highlighting
changed: Updated documentation structure with dedicated overview, API, and examples sections
changed: Enhanced code examples with proper TypeScript and HTML highlighting
changed: Improved example organization by functionality categories