Popover

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.

Un poco de contexto ayuda mucho

Abre ayuda breve junto a una preferencia, ciérrala y continúa. El ejemplo no realiza descargas ni sincronización.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuPopoverComponent } from '@neural-ui/native/popover';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, NeuPopoverComponent, 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">Un poco de contexto ayuda mucho</text><text class="product-caption">La ayuda, cerca de la decisión</text></view>
    <view class="product-surface"><text class="product-heading">Conservar copias del proyecto sin conexión</text><neu-switch label="Copias sin conexión" [(checked)]="offline" />
    <neu-popover dismissLabel="Cerrar información" closeLabel="Cerrar información" label="Cómo funcionan las copias sin conexión" title="Disponibles cuando las necesitas" [(open)]="open"><view class="product-section"><text>Una app puede conservar documentos en el dispositivo y sincronizar cambios al recuperar la conexión.</text><text class="product-caption">Este ejemplo solo cambia una preferencia; no descarga documentos.</text></view></neu-popover>
    <text class="product-caption">{{ offline() ? 'Preferencia sin conexión activada' : 'Preferencia sin conexión pausada' }}</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 open = signal(false);
  readonly offline = signal(false);
}

Información no disponible

Un activador deshabilitado no permite abrir la información de facturación.

Ver y copiar el ejemplo completo

unavailable-information.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuPopoverComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-popover dismissLabel="Cerrar información" closeLabel="Cerrar información" label="Información de facturación" title="Facturación" [disabled]="true"><text>Tu organización gestiona la facturación.</text></neu-popover>
    </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 {

}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

Popover · 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.
title	string	''	Input	Encabezado de la superficie, sección o presentación.
closeLabel	string	'Close information'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
dismissLabel	string	'Dismiss information'	Input	Nombre accesible de la acción exterior que cierra el contenido informativo sin activar ninguna de sus acciones.
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.

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);

Importación