Datos y multimedia
Image Viewer
Examina imágenes en una superficie propia con navegación y controles de zoom.
Importación
import { NeuImageViewerComponent } from '@neural-ui/native/image-viewer';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 mirada más cercana
Abre la colección, cambia de imagen y amplía o reduce el detalle. La miniatura, la descripción y la acción tienen su propio espacio.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuImageViewerComponent } from '@neural-ui/native/image-viewer';
import { View, Text, Image, ScrollView, Pressable } from '@ng-native/components';
import type { NeuImageItem } from '@neural-ui/native';
@Component({
selector: 'app-example',
imports: [NeuButtonComponent, NeuImageViewerComponent, View, Text, Image, ScrollView, Pressable],
template: `
<scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Una mirada más cercana</text><text class="product-caption">Estudios de paisaje · Colección Neural</text></view>
<view class="product-section">
<pressable accessibilityRole="button" [accessibilityLabel]="images[0].label" (press)="open.set(true)"><image class="collection-cover" [source]="{ uri: images[0].uri }" [alt]="images[0].label" resizeMode="cover" /></pressable>
<view class="product-section"><text class="product-heading">Paseo por el bosque</text><text class="product-caption">Formas suaves y colores tranquilos. Abre la colección para explorar cada detalle.</text></view>
<view class="product-actions"><neu-button label="Abrir imagen" size="sm" (pressed)="open.set(true)" /><text class="product-caption">4 ilustraciones</text></view>
</view>
<neu-image-viewer errorLabel="No se ha podido cargar la imagen" zoomOutLabel="Reducir imagen" zoomLabel="Ampliar imagen" nextLabel="Imagen siguiente" previousLabel="Imagen anterior" closeLabel="Cerrar visor" label="Composición original" [items]="images" [(open)]="open" [(index)]="index" /></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); }
.collection-cover { width: 100%; aspect-ratio: 1.333333; border-radius: 16px; }
`,
})
export class ExampleComponent {
readonly images: readonly NeuImageItem[] = [
{
"id": "forest",
"label": "Paseo por el bosque",
"uri": "/assets/media/v2/forest.png"
},
{
"id": "desert",
"label": "Formas del desierto",
"uri": "/assets/media/v2/desert.png"
},
{
"id": "night",
"label": "Cielo nocturno",
"uri": "/assets/media/v2/night.png"
},
{
"id": "coast",
"label": "Horizonte tranquilo",
"uri": "/assets/media/v2/coast.png"
}
];
readonly index = signal(0);
readonly open = signal(false);
}Playground interactivo
Ajusta la configuración y prueba el resultado.
Capturas del dispositivo en inglés.
Referencia API
Inputs
| Nombre | Tipo | Predeterminado | Enlace | Descripción |
|---|---|---|---|---|
| items | readonly NeuImageItem[] | [] | Input | Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos. |
| label | string | 'Image viewer' | Input | Título y nombre accesible alternativos cuando la imagen seleccionada no tiene label. El label de la imagen tiene prioridad. |
| closeLabel | string | 'Close viewer' | Input | Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo. |
| previousLabel | string | 'Previous image' | Input | Texto o nombre accesible utilizado para anterior. No ejecuta la acción por sí solo. |
| nextLabel | string | 'Next image' | Input | Texto o nombre accesible utilizado para siguiente. No ejecuta la acción por sí solo. |
| zoomLabel | string | 'Zoom in' | Input | Nombre accesible de la acción de acercar. Aumenta la escala en 100 puntos porcentuales hasta el 400%; se desactiva en el máximo o si no hay una imagen utilizable. |
| zoomOutLabel | string | 'Zoom out' | Input | Nombre accesible de la acción independiente de alejar. Reduce la escala en 100 puntos porcentuales hasta el 100%; se desactiva en el mínimo o si no hay una imagen utilizable. |
| errorLabel | string | 'Image could not be loaded' | Input | Texto o nombre accesible utilizado para estado de error. No ejecuta la acción por sí solo. |
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)]. |
| index | number | 0 | Model · bidireccional | Posición actual de imagen o carrusel, empezando por cero. Enlaza una signal escribible mediante [(index)]. |
Outputs
| Nombre | Payload | Cuándo se emite |
|---|---|---|
| openChange | boolean | Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model. |
| indexChange | number | Emite el valor actualizado de index. [(index)] enlaza este output junto con su input model. |
| closed | void | Comunica una solicitud de cierre; consulta el payload declarado antes de compartir handlers entre overlays. |
| opened | void | Comunica que la presentación nativa se ha abierto. |
| dismissed | void | Comunica la finalización del cierre nativo. |
Estado de los models
Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.
import { signal } from '@angular/core';
// Fields inside your component class
readonly open = signal<boolean>(false);
readonly index = signal<number>(0);Tipos e interfaces de datos
Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.
NeuImageItem
import type { NeuImageItem } from '@neural-ui/native';
// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuImageItem {
readonly id: string;
readonly uri: string;
readonly label: string;
}| Campo | Tipo | Requisito | Significado |
|---|---|---|---|
| id | string | Obligatorio | Identificador estable y único para seguimiento y selección. |
| uri | string | Obligatorio | URI nativa de imagen o archivo. |
| label | string | Obligatorio | Nombre legible del elemento. |