Menu | Neural Native

Ir a una sección

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.

La acción adecuada, donde toca

Usa el menú para ver el resumen o preparar una invitación local. El lanzamiento activo no se puede archivar y las opciones mantienen etiquetas descriptivas.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuMenuComponent } from '@neural-ui/native/menu';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuCardComponent, NeuBadgeComponent, NeuMenuComponent, NeuProgressBarComponent, 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">La acción adecuada, donde toca</text><text class="product-caption">Un menú de proyecto con resultados útiles</text></view>
    <neu-card title="Lanzamiento móvil" description="Espacio del producto" variant="outlined"><view class="product-section"><neu-badge label="En curso" tone="info" /><view class="product-actions"><neu-menu closeLabel="Cerrar menú" label="Acciones del proyecto" [items]="actions" (activated)="action.set($event)" /></view></view></neu-card>@if (action() === 'details') { <neu-card title="Resumen del proyecto" description="Lanzamiento móvil · Hito del viernes" variant="outlined"><view class="product-section"><neu-progress-bar label="Preparación del lanzamiento" [value]="72" /><text>Prepara la bienvenida y las notas finales del lanzamiento.</text></view></neu-card> }
    @if (action() === 'invite') { <view class="product-surface"><text class="product-heading">Invita a un compañero</text><neu-input requiredLabel="Obligatorio" label="Nombre del compañero" [(value)]="invitee" /><view class="product-actions"><neu-button label="Ver invitación" size="sm" [disabled]="!invitee().trim()" (pressed)="prepare()" /></view>@if (prepared()) { <text class="product-caption">Invitación preparada localmente para {{ prepared() }}</text> }</view> }</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 actions = [{ id: 'details', label: 'Abrir detalles', description: 'Ver el resumen del proyecto' }, { id: 'invite', label: 'Preparar invitación', description: 'Elige un compañero para este proyecto' }, { id: 'archive', label: 'Archivar proyecto', disabled: true }];
  readonly action = signal('');
  readonly invitee = signal('');
  readonly prepared = signal('');
  prepare() { if (this.invitee().trim()) this.prepared.set(this.invitee().trim()); }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
showTrigger	boolean	true	Input	Muestra la acción integrada que abre esta presentación.
closeLabel	string	'Dismiss menu'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
items	readonly NeuOption[]	[]	Input	Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
open	boolean	false	Model · bidireccional	Indica si se solicita mantener abierta la presentación o mensaje. Enlaza una signal escribible mediante [(open)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
activated	string	Emite el ID del elemento activado. Tu aplicación ejecuta la acción.

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 open = signal<boolean>(false);

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.

Importación