vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #212

pull/310/head
mertsincan 2020-04-06 07:25:05 +03:00
parent 030f44f157
commit 0cfa9e9d0a
16 changed files with 151 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/galleria/Galleria.d.ts vendored
View File

@ -23,14 +23,14 @@ export declare class Galleria extends Vue {
indicatorsPosition?: string;
baseZIndex?: number;
maskClass?: string;
galleriaStyle?: string;
galleriaClass?: string;
containerStyle?: string;
containerClass?: string;
$slots: {
header: VNode[];
footer: VNode[];
previewItem: VNode[];
item: VNode[];
previewCaption: VNode[];
indicator: VNode[];
thumbnailItem: VNode[];
thumbnail: VNode[];
}
}

4
src/components/galleria/Galleria.vue
View File

@ -101,11 +101,11 @@ export default {
type: String,
default: null
},
galleriaStyle: {
containerStyle: {
type: String,
default: null
},
galleriaClass: {
containerClass: {
type: String,
default: null
}

4
src/components/galleria/GalleriaContent.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.galleriaStyle">
<div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
<button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
<span class="p-galleria-close-icon pi pi-times"></span>
</button>
@ -90,7 +90,7 @@ export default {
'p-galleria-fullscreen': this.$attrs.fullScreen,
'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview,
'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen
}, thumbnailsPosClass, indicatorPosClass, this.$attrs.galleriaClass]
}, thumbnailsPosClass, indicatorPosClass, this.$attrs.containerClass]
}
},
components: {

4
src/components/galleria/GalleriaItemSlot.vue
View File

@ -26,9 +26,9 @@ export default {
if (template) {
let content;
switch(type) {
case 'previewItem':
case 'item':
case 'previewCaption':
case 'thumbnailItem':
case 'thumbnail':
content = template({
item
});

2
src/components/galleria/GalleriaPreview.vue
View File

@ -5,7 +5,7 @@
<span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-galleria-preview-items-content">
<GalleriaItemSlot type="previewItem" :item="activeItem" :templates="templates" />
<GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
</div>
<button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<span class="p-galleria-preview-next-icon pi pi-chevron-right"></span>

2
src/components/galleria/GalleriaThumbnails.vue
View File

@ -13,7 +13,7 @@
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
<div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
<GalleriaItemSlot type="thumbnailItem" :item="item" :templates="templates" />
<GalleriaItemSlot type="thumbnail" :item="item" :templates="templates" />
</div>
</div>
</div>

16
src/views/galleria/GalleriaBasicDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation">
<h3 class="first">Default</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div>
@ -29,10 +29,10 @@
</div>
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div>
@ -47,10 +47,10 @@
<template v-pre>
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
@ -64,10 +64,10 @@
&lt;/div&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;

8
src/views/galleria/GalleriaCaptionDemo.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="{item}">
<template #item="{item}">
<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="{item}">
<template #thumbnail="{item}">
<div class="p-grid p-nogutter p-justify-center">
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div>
@ -32,10 +32,10 @@
<CodeHighlight>
<template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="{item}"&gt;
&lt;template #item="{item}"&gt;
&lt;img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="{item}"&gt;
&lt;template #thumbnail="{item}"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
&lt;/div&gt;

16
src/views/galleria/GalleriaCircularDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -25,10 +25,10 @@
<h3>AutoPlay</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -43,10 +43,10 @@
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -56,10 +56,10 @@
&lt;h3&gt;AutoPlay&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

4
src/views/galleria/GalleriaDemo.vue
View File

@ -13,10 +13,10 @@
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>

22
src/views/galleria/GalleriaDoc.vue
View File

@ -8,10 +8,10 @@ import Galleria from 'primevue/galleria';
</CodeHighlight>
<h3>Getting Started</h3>
<p>Galleria requires previewItem template and a value as an array of objects.</p>
<p>Galleria requires item template and a value as an array of objects.</p>
<CodeHighlight>
&lt;Galleria :value="images"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
@ -39,10 +39,10 @@ export default {
<CodeHighlight>
&lt;Galleria :value="images" :numVisible="5"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
@ -56,10 +56,10 @@ export default {
<CodeHighlight>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
@ -92,10 +92,10 @@ responsiveOptions: [
&lt;template #header&gt;
&lt;h1&gt;Header&lt;/h1&gt;
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
@ -252,7 +252,7 @@ responsiveOptions: [
<td>Style class of the mask on fullscreen mode.</td>
</tr>
<tr>
<td>galleriaStyle</td>
<td>containerStyle</td>
<td>string</td>
<td>null</td>
<td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
@ -331,10 +331,10 @@ responsiveOptions: [
&lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

36
src/views/galleria/GalleriaFullScreenDemo.vue
View File

@ -11,12 +11,12 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -26,12 +26,12 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
<h3>Without Thumbnails</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -41,12 +41,12 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
<h3>Custom Contents</h3>
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -66,12 +66,12 @@
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -81,12 +81,12 @@
&lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /&gt;
&lt;h3&gt;Without Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -96,12 +96,12 @@
&lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
&lt;h3&gt;Custom Contents&lt;/h3&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

80
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -13,10 +13,10 @@
<h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -28,10 +28,10 @@
<h3>Change Preview On Indicator Hover</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -43,10 +43,10 @@
<h3>Show Indicator On Preview</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -61,10 +61,10 @@
<template #header>
Bottom
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -76,10 +76,10 @@
<template #header>
Top
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -91,10 +91,10 @@
<template #header>
Left
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -106,10 +106,10 @@
<template #header>
Right
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -121,10 +121,10 @@
<h3>Template</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -138,10 +138,10 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -155,10 +155,10 @@
<Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -179,10 +179,10 @@
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -194,10 +194,10 @@
&lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -209,10 +209,10 @@
&lt;h3&gt;Show Indicator On Preview&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -227,10 +227,10 @@
&lt;template #header&gt;
Bottom
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -242,10 +242,10 @@
&lt;template #header&gt;
Top
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -257,10 +257,10 @@
&lt;template #header&gt;
Left
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -272,10 +272,10 @@
&lt;template #header&gt;
Right
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -287,10 +287,10 @@
&lt;h3&gt;Template&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -304,10 +304,10 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -321,10 +321,10 @@
&lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

48
src/views/galleria/GalleriaPreviewDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -28,10 +28,10 @@
<template #header>
With Thumbnails
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -43,10 +43,10 @@
<template #header>
Without Thumbnails
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -59,10 +59,10 @@
<template #header>
With Thumbnails
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -74,10 +74,10 @@
<template #header>
Without Thumbnails
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -88,10 +88,10 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -106,10 +106,10 @@
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -122,10 +122,10 @@
&lt;template #header&gt;
With Thumbnails
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -137,10 +137,10 @@
&lt;template #header&gt;
Without Thumbnails
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -153,10 +153,10 @@
&lt;template #header&gt;
With Thumbnails
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -168,10 +168,10 @@
&lt;template #header&gt;
Without Thumbnails
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
@ -182,10 +182,10 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

8
src/views/galleria/GalleriaResponsiveDemo.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div>
@ -28,10 +28,10 @@
<CodeHighlight>
<template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;

40
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
@ -27,10 +27,10 @@
<template #header>
Left
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
@ -41,10 +41,10 @@
<template #header>
Right
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
@ -55,10 +55,10 @@
<template #header>
Top
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
@ -69,10 +69,10 @@
<template #header>
Bottom
</template>
<template #previewItem="slotProps">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnailItem="slotProps">
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
@ -87,10 +87,10 @@
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt;
@ -102,10 +102,10 @@
&lt;template #header&gt;
Left
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt;
@ -116,10 +116,10 @@
&lt;template #header&gt;
Right
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt;
@ -130,10 +130,10 @@
&lt;template #header&gt;
Top
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt;
@ -144,10 +144,10 @@
&lt;template #header&gt;
Bottom
&lt;/template&gt;
&lt;template #previewItem="slotProps"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt;