Gallery

Uso

Cada elemento contiene src y una alternativa alt accesible; title es opcional. Usa activeIndex para controlar la imagen o initialIndex para el estado interno. Las miniaturas pueden aparecer debajo o al lado de la imagen. objectFit elige contain o cover. previewEnabled abre el visor desde la imagen principal; sus controles permiten ampliar, girar, voltear, restablecer y descargar. Todas las etiquetas de la barra se pueden traducir.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

Ejemplos

Reiniciar ejemplo

Demo Código

1 / 4

Imagen aplicada: 1 · Vista previa: cerrada · Ampliación: 1 · Rotación: 0° · Volteo: — · Errores: 0

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Código contiene el ejemplo ejecutable completo.

Prueba y configura

Reiniciar ejemplo

Demo Código

1 / 4

Imagen aplicada: 1 · Vista previa: cerrada · Ampliación: 1 · Rotación: 0° · Volteo: — · Errores: 0

thumbnailPosition bottom

objectFit contain

maxZoom

previewEnabledshowThumbnailsshowCountershowItemNavigatorscircularColección vacía

Opciones avanzadas · 18

Comportamiento y contenido

imageLoading lazy

initialIndex

activeIndex

closeLabel

downloadLabel

flipHorizontalLabel

flipVerticalLabel

nextLabel

previewLabel

previousLabel

resetLabel

rotateLeftLabel

rotateRightLabel

thumbnailLabel

toolbarLabel

zoomInLabel

zoomOutLabel

Accesibilidad

ariaLabel

Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.

El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.

Template generado con tus opciones actuales. Abre Código para consultar el ejemplo completo.

template.html Copiar código

<neu-gallery
  [items]="images"
  [previewEnabled]="true"
  [showThumbnails]="true"
  [showCounter]="true"
  [showItemNavigators]="true"
  [circular]="false"
  [maxZoom]="3"
  thumbnailPosition="bottom"
  objectFit="contain"
  (activeIndexChange)="changeImage($event)"
  [activeIndex]="0"
  [ariaLabel]="'Galería de ilustraciones'"
  [closeLabel]="'Cerrar vista previa'"
  [downloadLabel]="'Descargar imagen'"
  [flipHorizontalLabel]="'Voltear horizontalmente'"
  [flipVerticalLabel]="'Voltear verticalmente'"
  [nextLabel]="'Imagen siguiente'"
  [previewLabel]="'Vista previa de imagen'"
  [previousLabel]="'Imagen anterior'"
  [resetLabel]="'Restablecer imagen'"
  [rotateLeftLabel]="'Girar a la izquierda'"
  [rotateRightLabel]="'Girar a la derecha'"
  [thumbnailLabel]="'Miniaturas de la galería'"
  [toolbarLabel]="'Controles de imagen'"
  [zoomInLabel]="'Ampliar'"
  [zoomOutLabel]="'Reducir'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

configured-state.ts Copiar código

export const images = [
  {
    "src": "assets/media/coast.svg",
    "alt": "Luz de costa",
    "title": "Luz de costa"
  },
  {
    "src": "assets/media/forest.svg",
    "alt": "Paseo por el bosque",
    "title": "Paseo por el bosque"
  },
  {
    "src": "assets/media/desert.svg",
    "alt": "Formas del desierto",
    "title": "Formas del desierto"
  },
  {
    "src": "assets/media/night.svg",
    "alt": "Cielo nocturno",
    "title": "Cielo nocturno"
  }
];

Datos y contenido

Acepta activeIndexChange actualizando activeIndex. previewChange, zoomChange, rotationChange y flipChange comunican el estado observado del visor. imageError identifica el elemento y el índice de una carga fallida. El Template item sustituye la imagen principal; caption sustituye su descripción. Conserva un alt significativo en las imágenes personalizadas.

Accesibilidad y teclado

Usa las flechas, Inicio y Fin para navegar. Las miniaturas exponen el estado activo. La vista previa contiene el foco, se cierra con Escape y devuelve el foco al control que la abrió. Proporciona etiquetas traducidas, alternativas descriptivas y contenido accesible por teclado en los Templates.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
NeuGalleryCaptionDirectiveVer ejemplo	Directiva pública de template	ng-template[neuGalleryCaption] Declaración template.d.ts Copiar código import { NeuGalleryCaptionDirective } from '@neural-ui/core/gallery'; // Declaración pública (solo referencia) export declare class NeuGalleryCaptionDirective { } Contexto completo context.d.ts Copiar código import type { NeuGalleryCaptionContext } from '@neural-ui/core/gallery'; import { NeuGalleryCaptionDirective } from '@neural-ui/core/gallery'; // Declaración pública (solo referencia) readonly templateRef: TemplateRef<NeuGalleryCaptionContext>;
NeuGalleryItemDirectiveVer ejemplo	Directiva pública de template	ng-template[neuGalleryItem] Declaración template.d.ts Copiar código import { NeuGalleryItemDirective } from '@neural-ui/core/gallery'; // Declaración pública (solo referencia) export declare class NeuGalleryItemDirective { } Contexto completo context.d.ts Copiar código import type { NeuGalleryItemContext } from '@neural-ui/core/gallery'; import { NeuGalleryItemDirective } from '@neural-ui/core/gallery'; // Declaración pública (solo referencia) readonly templateRef: TemplateRef<NeuGalleryItemContext>;

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Imagen principal

NeuGalleryItemDirective

Imagen principal

Reiniciar ejemplo

Demo Código

1 · Imagen activa

1 / 4

Imagen aplicada: 1 · Vista previa: cerrada · Ampliación: 1 · Rotación: 0° · Volteo: — · Errores: 0

Descripción de imagen

NeuGalleryCaptionDirective

Descripción de imagen

Reiniciar ejemplo

Demo Código

1 / 4

Luz de costaIlustración 1

Imagen aplicada: 1 · Vista previa: cerrada · Ampliación: 1 · Rotación: 0° · Volteo: — · Errores: 0

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

import type { NeuGalleryCaptionContext } from '@neural-ui/core/gallery';

// Declaración pública (solo referencia)
export interface NeuGalleryCaptionContext {
  $implicit: NeuGalleryItem;
  index: number;
}

import type { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

// Declaración pública (solo referencia)
export type NeuGalleryItem = NeuImageViewerItem;

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

import type { NeuGalleryItemContext } from '@neural-ui/core/gallery';

// Declaración pública (solo referencia)
export interface NeuGalleryItemContext {
  $implicit: NeuGalleryItem;
  active: boolean;
  index: number;
}

import type { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

// Declaración pública (solo referencia)
interface NeuImageViewerItem {
  alt: string;
  caption?: string;
  src: string;
}

Estilos y tokens

Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.

Componentes relacionados

Utiliza los componentes relacionados para completar tu interfaz.

• Carousel