Componente

Accordion

Paneles expandibles con animación suave. Soporta modo múltiple, paneles desactivados y accesibilidad ARIA completa.

import { NeuAccordionComponent } from '@neural-ui/core/accordion';

Exclusivo (un panel a la vez)

NeuralUI es una librería de componentes Angular construida con Signals, OnPush y estado sincronizado en la URL, con requisitos de dependencias explícitos.

No. NeuralUI está optimizada para funcionar con provideExperimentalZonelessChangeDetection() o con Zone.js estándar.

Sí. Todos los paneles implementan los roles ARIA requeridos: aria-expanded, aria-controls y role="region".

Sí, añade disabled: true al objeto NeuAccordionItem. El panel no responderá a clics ni al teclado.

Múltiple (varios paneles abiertos)

NeuralUI es una librería de componentes Angular construida con Signals, OnPush y estado sincronizado en la URL, con requisitos de dependencias explícitos.

No. NeuralUI está optimizada para funcionar con provideExperimentalZonelessChangeDetection() o con Zone.js estándar.

Sí. Todos los paneles implementan los roles ARIA requeridos: aria-expanded, aria-controls y role="region".

Sí, añade disabled: true al objeto NeuAccordionItem. El panel no responderá a clics ni al teclado.

Sin borde exterior

NeuralUI es una librería de componentes Angular construida con Signals, OnPush y estado sincronizado en la URL, con requisitos de dependencias explícitos.

No. NeuralUI está optimizada para funcionar con provideExperimentalZonelessChangeDetection() o con Zone.js estándar.

Sí. Todos los paneles implementan los roles ARIA requeridos: aria-expanded, aria-controls y role="region".

Sí, añade disabled: true al objeto NeuAccordionItem. El panel no responderá a clics ni al teclado.

import { NeuAccordionComponent, NeuAccordionItem } from '@neural-ui/core/accordion';

@Component({
  imports: [NeuAccordionComponent],
  template: `<neu-accordion [items]="items" [multiple]="true" />`
})
export class MyComponent {
  items: NeuAccordionItem[] = [
    { id: '1', title: 'Section 1', content: 'Content for section 1', expanded: true },
    { id: '2', title: 'Section 2', content: 'Content for section 2' },
    { id: '3', title: 'Disabled',  content: '...', disabled: true },
  ];
}