Image Gallery
Il componente g-image-gallery mostra un lista di tutte le immagini caricate e attualmente selezionabili, con possibilità di aggiungerne, modificare o eliminare le immagini che verranno visualizzate.
<g-image-gallery
v-model:loading="isLoading"
:images="images"
@delete-multiple-images="deleteMultipleImages"
@delete-single-image="deleteSingleImage"
@image-created="imageCreated"
@image-updated="imageUpdated"
/> <g-image-gallery
v-model:loading="isLoading"
:images="images"
@delete-multiple-images="deleteMultipleImages"
@delete-single-image="deleteSingleImage"
@image-created="imageCreated"
@image-updated="imageUpdated"
/>Props
| Nome | Tipo | Required | Default | Descrizione |
|---|---|---|---|---|
| images | GBaseImage[] | si | L'array di immagini che verranno mostrate in galleria | |
| editLabel | String | no | "Edit" | La label dei pulsanti di modifica di un'immagine |
| uploadLabel | String | no | "Upload" | La label dei pulsanti di caricamento di un'immagine |
| galleryTitle | String | no | "Gallery | Il titolo che verrà mostrato nella galleria immagini |
| cardHeight | String | no | "100px" | L'altezza della card dell'immagine in galleria |
| cardWidth | String | no | "100px" | La larghezza della card dell'immagine in galleria |
| searchLabel | String | no | "Name" | La label del campo di ricerca di un'immagine all'interno della galleria. Di default avviene in base al nome |
| deleteLabel | String | no | "Delete" | La label dei pulsanti di eliminazione di un'immagine |
| deleteImageDialogTitle | String | no | "Confirm action" | Il titolo del dialog di conferma quando si vuole eliminare una o più immagini |
| deleteImageDialogContent | String | no | "Are you sure you want to do this?" | Il contenuto del dialog di conferma quando si vuole eliminare una o più immagini |
| confirmLabel | String | no | "Confirm" | La label dei pulsanti di conferma di una determinata azione |
| cancelLabel | String | no | "Cancel | La label dei pulsanti di annullamento di una determinata azione |
| loading | Boolean | no | false | Variabile che controlla il caricamento del v-skeleton-loader in galleria qual'ora sia stata fatta un'azione |
| formTitle | String | no | "Image" | Il titolo del dialog della form di aggiunta di una nuova immagine in galleria |
| textFieldLabel | String | no | "Name" | La label del campo della form dove inserisci il nome dell'immagein |
| fileInputLabel | String | no | "File" | La label del campo della form dove carichi il file dell'immagine |
| requiredMessage | String | no | "Field is required" | Il messaggio di errore qual'ora non si rispetti la regola che il campo è obbligatorio |
| saveLabel | String | no | "Save" | La label dei pulsanti di salvataggio di un'azione |
Eventi
| Nome | Parametri | Tipo | Descrizione |
|---|---|---|---|
| update:loading | (value: boolean) | void | Evento che aggiorna il valore della variabile di caricamento quando si compie un'azione |
| selected | (image: GBaseImage, null) | void | Evento che si scatena quando si seleziona una delle immagini presenti in galleria |
| deleteSingleImage | (imageId: number, null) | void | Evento che si scatena quando si vuole eliminare una singola immagine dalla galleria. Ha come parametri l'Id dell'immagine che si vuole eliminare |
| deleteMultipleImages | (imageIds: number[], null) | void | Evento che si scatena quando si vogliono eliminare una o più immagini tramite la selezione multipla. Ha come prametri l'array composto dagli Id delle immagini che si vogliono eliminare |
| imageCreated | (form: GImageForm) | void | Evento che si scatena quando si vuole aggiungere una nuova immagine alla galleria. Ha come parametri l'oggetto composto dai campi di input da inserire quando si crea un'immagine |
| imageUpdated | (image: GBaseImage, form: GImageForm) | void | Evento che si scatena quando si vuole modificare un'immagine già presente in galleria. Ha come parametri l'oggetto dell'immagine che si desidera modificare e l'oggetto composto dai campi di input modificabili |