Context Menu

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.

Las acciones, cerca de su objeto

Pulsa el proyecto para ver su resumen o abre el menú contextual para otras acciones. El botón de tres puntos permite abrir el mismo menú sin pulsación prolongada.

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 { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuContextMenuComponent } from '@neural-ui/native/context-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, NeuAvatarComponent, NeuContextMenuComponent, 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">Las acciones, cerca de su objeto</text><text class="product-caption">Pulsa para abrir, mantén para ver opciones</text></view>
    <neu-context-menu closeLabel="Cerrar menú" label="Lanzamiento móvil" hint="Mantén pulsado el proyecto o pulsa los tres puntos" actionsLabel="Acciones del proyecto" [items]="actions" [(open)]="menuOpen" (pressed)="action.set('details')" (activated)="action.set($event)"><neu-avatar label="Lanzamiento móvil" size="md" /></neu-context-menu>@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()); }
  readonly menuOpen = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

Context 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.
items	readonly NeuOption[]	[]	Input	Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos.
hint	string	'Long press for actions'	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
actionsLabel	string	'Actions'	Input	Texto o nombre accesible utilizado para grupo de acciones. No ejecuta la acción por sí solo.
closeLabel	string	'Dismiss actions'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
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.
pressed	void	Emite el evento de pulsación nativo al activar una acción habilitada.

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