Accordion

Uso

Proporciona items con un id único y estable, un title y contenido HTML opcional saneado. multiple permite varios paneles abiertos. Enlaza expandedKeys y acepta expandedKeysChange si la aplicación controla el estado, o deja expandedKeys sin enlazar y utiliza initialExpandedKeys una sola vez. Mantén esa elección durante la vida de la instancia. Los Templates de cabecera y cuerpo reciben el elemento y su estado expanded.

Ejemplos

Prueba el comportamiento y consulta el código ejecutable en Código.

Prueba y configura

Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.

<neu-accordion
  [items]="items()"
  [multiple]="false"
  [bordered]="true"
  [expandedKeys]="expanded()"
  (expandedKeysChange)="expanded.set($event)"
  (panelToggle)="lastToggle.set($event.id + &quot;: &quot; + $event.expanded)"
/>

import { signal } from '@angular/core';

export const items = signal([
  {
    "id": "delivery",
    "title": "Entrega",
    "content": "Los pedidos llegan en dos días laborables."
  },
  {
    "id": "returns",
    "title": "Devoluciones",
    "content": "Contacta con soporte en un plazo de 30 días."
  },
  {
    "id": "unavailable",
    "title": "Próximamente",
    "disabled": true
  }
]);

export const expanded = signal([
  "delivery"
]);

Datos y contenido

expandedKeysChange propone el array completo de claves abiertas. panelToggle comunica la acción individual como { id, expanded }. initialExpandedKeys no sustituye al estado aplicado de forma reactiva.

Accesibilidad y teclado

Tab llega a las cabeceras habilitadas. Intro o Espacio abre o cierra una sección. Las flechas arriba/abajo, Inicio y Fin mueven el foco entre cabeceras, omitiendo las deshabilitadas. El contenido cerrado es inerte. No anides controles interactivos en las cabeceras personalizadas.

API

Los Inputs y Outputs corresponden al paquete Core fijado. Los tipos con nombre enlazan a sus definiciones. Templates incluye ejemplos ejecutables de cada zona disponible.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Declaración pública (solo referencia)
export declare class NeuAccordionBodyDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
}

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

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuAccordionBodyContext<T>>;

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Declaración pública (solo referencia)
export declare class NeuAccordionHeaderDirective<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
}

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

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuAccordionHeaderContext<T>>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Declaración pública (solo referencia)
export interface NeuAccordionBodyContext<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
  readonly $implicit: T;
  readonly expanded: boolean;
}

import type { NeuAccordionItem } from '@neural-ui/core/accordion';
import type { NeuAccordionKey } from '@neural-ui/core/accordion';

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

// Declaración pública (solo referencia)
export interface NeuAccordionHeaderContext<T extends NeuAccordionItem<NeuAccordionKey> = NeuAccordionItem<NeuAccordionKey>> {
  readonly $implicit: T;
  readonly expanded: boolean;
}

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

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

// Declaración pública (solo referencia)
export interface NeuAccordionItem<K extends NeuAccordionKey = string> {
  readonly content?: string;
  readonly disabled?: boolean;
  readonly id: K;
  readonly title: string;
}

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

// Declaración pública (solo referencia)
export type NeuAccordionKey = string | number;

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

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

// Declaración pública (solo referencia)
export interface NeuAccordionPanelToggle<K extends NeuAccordionKey = string> {
  readonly expanded: boolean;
  readonly id: K;
}

Estilos y tokens

Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Tabs
• Panel