Data

Galleria

Galleria immagini con strip di thumbnail, navigazione, indicatori, autoplay e supporto fullscreen.

Import

import { Galleria } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`GalleriaImage[]`	`[]`	Array di immagini da visualizzare
`activeIndex`	`number`	`0`	Indice dell'immagine attiva (supporta `v-model:activeIndex`)
`fullScreen`	`boolean`	`false`	Abilita la modalita' fullscreen
`visible`	`boolean`	`false`	Visibilita' del fullscreen (supporta `v-model:visible`)
`numVisible`	`number`	`5`	Numero di thumbnail visibili
`responsiveOptions`	`GalleriaResponsiveOptions[]`	`[]`	Opzioni responsive per thumbnail
`circular`	`boolean`	`false`	Navigazione circolare tra le immagini
`autoPlay`	`boolean`	`false`	Abilita l'autoplay
`transitionInterval`	`number`	`4000`	Intervallo autoplay in ms
`showThumbnails`	`boolean`	`true`	Mostra la strip di thumbnail
`thumbnailsPosition`	`'bottom' \| 'top' \| 'left' \| 'right'`	`'bottom'`	Posizione della strip di thumbnail
`showItemNavigators`	`boolean`	`false`	Mostra frecce di navigazione sull'immagine principale
`showItemNavigatorsOnHover`	`boolean`	`false`	Mostra i navigatori solo all'hover
`showIndicators`	`boolean`	`false`	Mostra indicatori (pallini) in alternativa ai thumbnail
`indicatorsPosition`	`'bottom' \| 'top' \| 'left' \| 'right'`	`'bottom'`	Posizione degli indicatori
`changeItemOnIndicatorHover`	`boolean`	`false`	Cambia immagine all'hover sull'indicatore invece del click
`showThumbnailNavigators`	`boolean`	`true`	Mostra frecce di navigazione nella strip di thumbnail
`containerClass`	`string \| Record<string, boolean> \| (string \| Record<string, boolean>)[]`	`''`	Classe CSS aggiuntiva per il container
`containerStyle`	`string \| Record<string, string>`	`''`	Stile inline aggiuntivo per il container

GalleriaImage

Proprieta'	Tipo	Descrizione
`itemImageSrc`	`string`	URL dell'immagine principale (obbligatorio)
`thumbnailImageSrc`	`string`	URL del thumbnail (opzionale, usa `itemImageSrc` se assente)
`alt`	`string`	Testo alternativo
`title`	`string`	Titolo visualizzato nella caption
`description`	`string`	Descrizione visualizzata nella caption

GalleriaResponsiveOptions

Proprieta'	Tipo	Descrizione
`breakpoint`	`string`	Breakpoint CSS (es. `'768px'`)
`numVisible`	`number`	Numero di thumbnail visibili sotto questo breakpoint

Emits

Evento	Payload	Descrizione
`update:activeIndex`	`number`	Emesso al cambio di immagine attiva
`update:visible`	`boolean`	Emesso al cambio di visibilita' fullscreen

Slot

Slot	Scope	Descrizione
`item`	`{ item: GalleriaImage, index: number }`	Template custom per l'immagine principale
`thumbnail`	`{ item: GalleriaImage, index: number }`	Template custom per ogni thumbnail
`caption`	`{ item: GalleriaImage }`	Template custom per la caption dell'immagine
`previcon`	—	Icona custom per il navigatore precedente
`nexticon`	—	Icona custom per il navigatore successivo
`closeicon`	—	Icona custom per il pulsante di chiusura fullscreen
`header`	—	Contenuto nell'header della galleria
`footer`	—	Contenuto nel footer della galleria
`indicator`	`{ index: number, active: boolean }`	Template custom per ogni indicatore

Esempi

Fullscreen con Navigatori

Con Thumbnail Laterali

Autoplay con Caption

Con Indicatori (senza Thumbnail)

Note Comportamento

In modalita' fullscreen, il componente usa <Teleport to="body"> ed e' controllato da v-model:visible
In fullscreen, la navigazione da tastiera e' abilitata: ArrowLeft/ArrowRight per navigare, Escape per chiudere
Gli indicatori sono visibili solo quando showThumbnails e' false
La strip di thumbnail si aggiorna automaticamente per mantenere l'immagine attiva visibile

Accessibilita'

I pulsanti di navigazione hanno aria-label localizzati tramite @pzeta/vue-i18n
Il pulsante di chiusura fullscreen ha aria-label localizzato
Gli indicatori hanno aria-label con il numero dell'immagine
Navigazione da tastiera disponibile in modalita' fullscreen

TypeScript

import type { GalleriaProps, GalleriaImage, GalleriaResponsiveOptions } from '@pzeta/vue-components'

const images: GalleriaImage[] = [
  {
    itemImageSrc: 'https://example.com/image.jpg',
    thumbnailImageSrc: 'https://example.com/thumb.jpg',
    alt: 'Descrizione immagine',
    title: 'Titolo',
    description: 'Descrizione della foto',
  },
]

EventCalendar

Calendario mensile con griglia di navigazione, gestione eventi e sidebar laterale con elenco eventi del giorno selezionato.

Image

Componente immagine con supporto per preview modale, zoom e gestione degli eventi di caricamento.