Accordion | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Lo que conviene saber antes de pedir

Consulta respuestas sobre la compra y compara la apertura única y múltiple. Al pasar a apertura única queda como máximo una respuesta desplegada.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAccordionComponent } from '@neural-ui/native/accordion';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, NeuBadgeComponent, NeuAccordionComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Lo que conviene saber antes de pedir</text><text class="product-caption">Respuestas claras cuando las necesitas</text></view>
    <view class="product-surface"><neu-badge label="Envíos y devoluciones" tone="info" /><neu-accordion [items]="questions" [(expanded)]="expanded" [multiple]="multiple()" /></view>
    <neu-switch label="Mantener varias respuestas abiertas" [checked]="multiple()" (checkedChange)="changeMode($event)" /></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly questions: readonly NeuOption[] = [
    {
      "id": "shipping",
      "label": "¿Cuándo llegará mi pedido?",
      "description": "Los pedidos suelen llegar en tres días laborables."
    },
    {
      "id": "returns",
      "label": "¿Puedo devolver un artículo?",
      "description": "Contacta con soporte durante los 30 días posteriores a la entrega."
    }
  ];
  readonly expanded = signal<readonly string[]>(['shipping']);
  readonly multiple = signal(true);
  changeMode(value: boolean) { this.multiple.set(value); if (!value) this.expanded.update(items => items.slice(0, 1)); }
}

Una sección cada vez

Al abrir una respuesta se cierra la que estaba desplegada.

Ver y copiar el ejemplo completo

one-section-at-a-time.component.ts

import { Component, signal } from '@angular/core';
import { NeuAccordionComponent } from '@neural-ui/native/accordion';
import { View, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuAccordionComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-accordion [items]="questions" [(expanded)]="singleExpanded" [multiple]="false" />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly questions: readonly NeuOption[] = [
    {
      "id": "shipping",
      "label": "¿Cuándo llegará mi pedido?",
      "description": "Los pedidos suelen llegar en tres días laborables."
    },
    {
      "id": "returns",
      "label": "¿Puedo devolver un artículo?",
      "description": "Contacta con soporte durante los 30 días posteriores a la entrega."
    }
  ];
  readonly expanded = signal<readonly string[]>(['shipping']);
  readonly singleExpanded = signal<readonly string[]>([]);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Accordion · android · native capture — **Android**Captura nativa

Accordion · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
items	readonly NeuOption[]	[]	Input	Cada elemento tiene un id estable, label para su cabecera pulsable y description para el texto del cuerpo desplegable. La propiedad disabled bloquea ese elemento. Cabecera y cuerpo comparten una superficie y quedan separados por una línea al abrirse.
multiple	boolean	false	Input	Permite varias opciones o archivos cuando se admite; consulta el tipo declarado del model.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
expanded	readonly string[]	[]	Model · bidireccional	IDs de las secciones o nodos expandidos actualmente. Enlaza una signal escribible mediante [(expanded)].

Outputs

Nombre	Payload	Cuándo se emite
expandedChange	readonly string[]	Emite el valor actualizado de expanded. [(expanded)] enlaza este output junto con su input model.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly expanded = signal<readonly string[]>([]);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.