Panel | Neural Native

Importación

component.ts

import { NeuPanelComponent } from '@neural-ui/native/panel';

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.

Una entrega con todos los detalles

Recoge los detalles manteniendo visibles un pedido ilustrado de Ediciones Neural y su franja de llegada. El panel contiene destinatario e instrucciones; el pedido es ilustrativo y no sigue un envío real.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { NeuPanelComponent } from '@neural-ui/native/panel';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuBadgeComponent, NeuDividerComponent, NeuPanelComponent, 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">Una entrega con todos los detalles</text><text class="product-caption">El resumen visible y el resto a mano</text></view>
    <view class="delivery-summary"><view class="product-row"><view class="product-copy"><text class="delivery-kicker">EDICIONES NEURAL</text></view><neu-badge label="En camino" tone="info" /></view>
    <view class="product-row"><view class="edition-cover"><text class="edition-small">GUÍA DE CAMPO</text><text class="edition-number">03</text><view class="edition-rule"></view><text class="edition-small">Ideas en práctica</text></view><view class="product-copy"><text class="delivery-title">Espacio para crear</text><text class="delivery-caption">Cuaderno de estudio · Edición azul</text><text class="delivery-order">Pedido NN-2048</text></view></view>
    <view class="delivery-arrival"><text class="delivery-arrival-label">LLEGA EL VIERNES</text><text class="delivery-arrival-time">09:00 — 12:00</text></view></view>
    <neu-panel title="Detalles de entrega" [collapsible]="true" [(collapsed)]="collapsed"><view class="delivery-details"><view class="product-section"><text class="delivery-detail-label">DESTINATARIO</text><text class="product-heading">Alex Morgan</text><text>Calle del Mercado, 24</text></view><neu-divider /><view class="product-section"><text class="delivery-detail-label">NOTA DE ENTREGA</text><text class="product-caption">Dejar en recepción si no hay nadie disponible.</text></view></view></neu-panel></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); }
.delivery-summary { gap: 20px; padding: 20px; border-radius: 20px; background-color: #f4eee4; --neu-text: #28374b; --neu-muted: #536277; }
.delivery-kicker { color: #526075; font-size: 11px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.edition-cover { width: 100px; min-height: 142px; padding: 12px; gap: 8px; border-radius: 4px; background-color: #1748a8; }
.edition-small { color: #dce9ff; font-size: 9px; line-height: 13px; font-weight: 600; }
.edition-number { color: #ffffff; font-size: 44px; line-height: 48px; font-weight: 600; }
.edition-rule { height: 2px; background-color: #9dc8fc; }
.delivery-title { color: #28374b; font-size: 22px; line-height: 28px; font-weight: 600; }
.delivery-caption { color: #536277; font-size: 13px; line-height: 19px; }
.delivery-order { color: #536277; font-size: 11px; line-height: 16px; padding-top: 8px; }
.delivery-arrival { gap: 4px; padding-top: 16px; border-top-width: 1px; border-color: #d4cec4; }
.delivery-arrival-label { color: #536277; font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.delivery-arrival-time { color: #28374b; font-size: 20px; line-height: 26px; font-weight: 600; }
.delivery-details { gap: 20px; padding: 4px; }
.delivery-detail-label { color: var(--neu-muted, #596477); font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
  `,
})
export class ExampleComponent {
  readonly collapsed = signal(false);
}

Información siempre visible

Mantén visible la información importante de ayuda con la entrega.

Ver y copiar el ejemplo completo

persistent-information.component.ts

import { Component } from '@angular/core';
import { NeuPanelComponent } from '@neural-ui/native/panel';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuPanelComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-panel title="Ayuda con la entrega" [collapsible]="false"><text>¿Necesitas un cambio? Contacta con el equipo de reparto antes de las 18:00.</text></neu-panel>
    </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 {

}

Cabecera y pie propios

La cabecera personalizada conserva el control de expansión. El contenido y el pie se recogen juntos.

Ver y copiar el ejemplo completo

projected-regions.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuPanelComponent } from '@neural-ui/native/panel';
import { View, Text, ScrollView } from '@ng-native/components';
import { NeuPanelHeaderDirective, NeuPanelFooterDirective } from '@neural-ui/native/panel';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuPanelComponent, NeuPanelHeaderDirective, NeuPanelFooterDirective, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-panel title="Detalles de entrega" [(collapsed)]="collapsed">
      <view neuPanelHeader class="delivery-heading"><text class="usage-heading">Detalles de entrega</text><neu-badge label="Mañana" tone="info" /></view>
      <text>Market Street 24 · 9:00–12:00</text>
      <view neuPanelFooter class="delivery-actions"><neu-button label="Cambiar entrega" size="sm" variant="text" (pressed)="changed.set(true)" /></view>
    </neu-panel>
    <text class="usage-caption" accessibilityLiveRegion="polite">{{ changed() ? 'Cambio de entrega solicitado' : 'Revisa tu entrega' }}</text>
    </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; }

.delivery-heading { gap: 6px; align-items: flex-start; } .delivery-actions { flex-direction: row; justify-content: flex-end; }
  `,
})
export class ExampleComponent {
  readonly collapsed = signal(false);
  readonly changed = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Personalización

Importa estas directivas junto con el componente y añádelas a Component.imports. Los ejemplos anteriores incluyen la configuración completa.

personalization-imports.ts

import { NeuPanelHeaderDirective, NeuPanelFooterDirective } from '@neural-ui/native/panel';

Plantilla o región	Contexto	Uso
`[neuPanelHeader]`	`—`	Sustituye el encabezado. El panel conserva su control de expansión y utiliza title como nombre accesible; no anides otro botón aquí.
`ng-content`	`—`	El contenido sin marcador forma el cuerpo desplegable.
`[neuPanelFooter]`	`—`	Se muestra después del cuerpo y se recoge junto con él.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	Obligatorio	Input	Encabezado de la superficie, sección o presentación.
collapsible	boolean	true	Input	Permite contraer y expandir esta superficie.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
collapsed	boolean	false	Model · bidireccional	Indica si el panel está contraído. Enlaza una signal escribible mediante [(collapsed)].

Outputs

Nombre	Payload	Cuándo se emite
collapsedChange	boolean	Emite el valor actualizado de collapsed. [(collapsed)] 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 collapsed = signal<boolean>(false);