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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/345/head
cagataycivici 2020-05-21 12:21:06 +03:00
parent 1ffc1616dc f3f5ec6831
commit 0f1229102f
17 changed files with 325 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/demo/data/photos.json
View File

@ -1,91 +1,91 @@
{ {
"data":[ "data":[
{ {
"previewImageSrc": "demo/images/galleria/galleria1.jpg", "itemImageSrc": "demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1", "alt": "Description for Image 1",
"title": "Title 1" "title": "Title 1"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria2.jpg", "itemImageSrc": "demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2", "alt": "Description for Image 2",
"title": "Title 2" "title": "Title 2"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria3.jpg", "itemImageSrc": "demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3", "alt": "Description for Image 3",
"title": "Title 3" "title": "Title 3"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria4.jpg", "itemImageSrc": "demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4", "alt": "Description for Image 4",
"title": "Title 4" "title": "Title 4"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria5.jpg", "itemImageSrc": "demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5", "alt": "Description for Image 5",
"title": "Title 5" "title": "Title 5"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria6.jpg", "itemImageSrc": "demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6", "alt": "Description for Image 6",
"title": "Title 6" "title": "Title 6"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria7.jpg", "itemImageSrc": "demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7", "alt": "Description for Image 7",
"title": "Title 7" "title": "Title 7"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria8.jpg", "itemImageSrc": "demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8", "alt": "Description for Image 8",
"title": "Title 8" "title": "Title 8"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria9.jpg", "itemImageSrc": "demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9", "alt": "Description for Image 9",
"title": "Title 9" "title": "Title 9"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria10.jpg", "itemImageSrc": "demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10", "alt": "Description for Image 10",
"title": "Title 10" "title": "Title 10"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria11.jpg", "itemImageSrc": "demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11", "alt": "Description for Image 11",
"title": "Title 11" "title": "Title 11"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria12.jpg", "itemImageSrc": "demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12", "alt": "Description for Image 12",
"title": "Title 12" "title": "Title 12"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria13.jpg", "itemImageSrc": "demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13", "alt": "Description for Image 13",
"title": "Title 13" "title": "Title 13"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria14.jpg", "itemImageSrc": "demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14", "alt": "Description for Image 14",
"title": "Title 14" "title": "Title 14"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria15.jpg", "itemImageSrc": "demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15", "alt": "Description for Image 15",
"title": "Title 15" "title": "Title 15"

3
src/assets/styles/app/_core.scss
View File

@ -131,7 +131,8 @@ pre[class*="language-"] code {
color: var(--text-color); color: var(--text-color);
} }
&.operator { &.operator,
&.string {
background: transparent; background: transparent;
} }
} }

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

@ -29,7 +29,7 @@ export declare class Galleria extends Vue {
header: VNode[]; header: VNode[];
footer: VNode[]; footer: VNode[];
item: VNode[]; item: VNode[];
previewCaption: VNode[]; caption: VNode[];
indicator: VNode[]; indicator: VNode[];
thumbnail: VNode[]; thumbnail: VNode[];
} }

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

@ -182,7 +182,6 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
height: 100%;
} }
.p-galleria-item-container { .p-galleria-item-container {
@ -299,7 +298,6 @@ export default {
.p-galleria-thumbnails-left .p-galleria-content, .p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content { .p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row; flex-direction: row;
align-items: center;
} }
.p-galleria-thumbnails-left .p-galleria-item-wrapper, .p-galleria-thumbnails-left .p-galleria-item-wrapper,
@ -320,6 +318,7 @@ export default {
.p-galleria-thumbnails-left .p-galleria-thumbnail-container, .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container { .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
flex-direction: column; flex-direction: column;
flex-grow: 1;
} }
.p-galleria-thumbnails-left .p-galleria-thumbnail-items, .p-galleria-thumbnails-left .p-galleria-thumbnail-items,

271
src/views/galleria/GalleriaAdvancedDemo.vue
View File

@ -12,7 +12,7 @@
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"> :circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
@ -22,16 +22,148 @@
<template #footer> <template #footer>
<div class="custom-galleria-footer"> <div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" /> <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images"> <span v-if="images" class="title-container">
<span>{{activeIndex + 1}}/{{images.length}}</span> <span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeIndex].title}}</span> <span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeIndex].alt}}</span> <span>{{images[activeIndex].alt}}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" /> <Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" />
</div> </div>
</template> </template>
</Galleria> </Galleria>
</div> </div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /&gt;
&lt;/template&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;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;div class="custom-galleria-footer"&gt;
&lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
&lt;span v-if="images" class="title-container"&gt;
&lt;span&gt;{{activeIndex + 1}}/{{images.length}}&lt;/span&gt;
&lt;span class="title"&gt;{{images[activeIndex].title}}&lt;/span&gt;
&lt;span&gt;{{images[activeIndex].alt}}&lt;/span&gt;
&lt;/span&gt;
&lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import PhotoService from '../../service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]
}
},
galleriaService: null,
created() {
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
}
}
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep {
.custom-galleria {
&.fullscreen {
display: flex;
flex-direction: column;
.p-galleria-content {
flex-grow: 1;
justify-content: center;
}
}
.p-galleria-content {
position: relative;
}
.p-galleria-thumbnail-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.p-galleria-thumbnail-items-container {
width: 100%;
}
.custom-galleria-footer {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
color: #ffffff;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button {
margin-left: auto;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.title-container {
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</div> </div>
</template> </template>
@ -45,7 +177,7 @@ export default {
images: null, images: null,
activeIndex: 0, activeIndex: 0,
showThumbnails: false, showThumbnails: false,
isPreviewFullScreen: false fullScreen: false
} }
}, },
galleriaService: null, galleriaService: null,
@ -61,17 +193,17 @@ export default {
this.showThumbnails = !this.showThumbnails; this.showThumbnails = !this.showThumbnails;
}, },
toggleFullScreen() { toggleFullScreen() {
if (this.isPreviewFullScreen) { if (this.fullScreen) {
this.closePreviewFullScreen(); this.closeFullScreen();
} }
else { else {
this.openPreviewFullScreen(); this.openFullScreen();
} }
}, },
onFullScreenChange() { onFullScreenChange() {
this.isPreviewFullScreen = !this.isPreviewFullScreen; this.fullScreen = !this.fullScreen;
}, },
openPreviewFullScreen() { openFullScreen() {
let elem = this.$refs.galleria.$el; let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
elem.requestFullscreen(); elem.requestFullscreen();
@ -86,7 +218,7 @@ export default {
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} }
}, },
closePreviewFullScreen() { closeFullScreen() {
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} }
@ -115,10 +247,10 @@ export default {
}, },
computed: { computed: {
galleriaClass() { galleriaClass() {
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}]; return ['custom-galleria', {'fullscreen': this.fullScreen}];
}, },
fullScreenIcon() { fullScreenIcon() {
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`; return `pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
} }
} }
} }
@ -127,82 +259,61 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.custom-galleria { .custom-galleria {
&.p-galleria { &.fullscreen {
display: flex;
flex-direction: column;
.p-galleria-content { .p-galleria-content {
height: 95%; flex-grow: 1;
overflow: hidden; justify-content: center;
position: relative; }
}
.p-galleria-thumbnail-content { .p-galleria-content {
position: absolute; position: relative;
width: 100%; }
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
.p-galleria-thumbnail-container { .p-galleria-thumbnail-wrapper {
.p-galleria-thumbnail-items-content { position: absolute;
.p-galleria-thumbnail-items-container { bottom: 0;
.p-galleria-thumbnail-item { left: 0;
opacity: .6; width: 100%;
}
&.p-galleria-thumbnail-item-current { .p-galleria-thumbnail-items-container {
opacity: 1; width: 100%;
} }
}
} .custom-galleria-footer {
} display: flex;
} align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
color: #ffffff;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button {
margin-left: auto;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
} }
} }
}
.p-galleria-footer { .title-container {
padding: 0; > span {
background-color: rgba(0, 0, 0, .9); font-size: .9rem;
border: rgba(0, 0, 0, .9); padding-left: .829rem;
.custom-galleria-footer { &.title {
width: 100%; font-weight: bold;
display: flex;
align-items: center;
justify-content: stretch;
color: #ffffff;
> button {
background-color: transparent;
padding: .3rem;
margin: .2rem;
border: 0 none;
border-radius: 0;
color: #ffffff;
&:hover {
background-color: transparent;
}
}
> span {
flex-grow: 1;
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
&.preview-fullscreen {
.p-galleria-preview-container {
.p-galleria-preview-nav-button {
top: 50%;
height: 20rem;
width: 4rem;
margin-top: -10rem;
}
} }
} }
} }

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

@ -11,7 +11,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000"> :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -27,7 +27,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt; :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;

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

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

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

@ -10,7 +10,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />

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

@ -12,7 +12,7 @@ import Galleria from 'primevue/galleria';
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images"&gt; &lt;Galleria :value="images"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight> </CodeHighlight>
@ -23,91 +23,91 @@ import Galleria from 'primevue/galleria';
{ {
"data":[ "data":[
{ {
"previewImageSrc": "demo/images/galleria/galleria1.jpg", "itemImageSrc": "demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1", "alt": "Description for Image 1",
"title": "Title 1" "title": "Title 1"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria2.jpg", "itemImageSrc": "demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2", "alt": "Description for Image 2",
"title": "Title 2" "title": "Title 2"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria3.jpg", "itemImageSrc": "demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3", "alt": "Description for Image 3",
"title": "Title 3" "title": "Title 3"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria4.jpg", "itemImageSrc": "demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4", "alt": "Description for Image 4",
"title": "Title 4" "title": "Title 4"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria5.jpg", "itemImageSrc": "demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5", "alt": "Description for Image 5",
"title": "Title 5" "title": "Title 5"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria6.jpg", "itemImageSrc": "demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6", "alt": "Description for Image 6",
"title": "Title 6" "title": "Title 6"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria7.jpg", "itemImageSrc": "demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7", "alt": "Description for Image 7",
"title": "Title 7" "title": "Title 7"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria8.jpg", "itemImageSrc": "demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8", "alt": "Description for Image 8",
"title": "Title 8" "title": "Title 8"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria9.jpg", "itemImageSrc": "demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9", "alt": "Description for Image 9",
"title": "Title 9" "title": "Title 9"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria10.jpg", "itemImageSrc": "demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10", "alt": "Description for Image 10",
"title": "Title 10" "title": "Title 10"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria11.jpg", "itemImageSrc": "demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11", "alt": "Description for Image 11",
"title": "Title 11" "title": "Title 11"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria12.jpg", "itemImageSrc": "demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12", "alt": "Description for Image 12",
"title": "Title 12" "title": "Title 12"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria13.jpg", "itemImageSrc": "demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13", "alt": "Description for Image 13",
"title": "Title 13" "title": "Title 13"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria14.jpg", "itemImageSrc": "demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14", "alt": "Description for Image 14",
"title": "Title 14" "title": "Title 14"
}, },
{ {
"previewImageSrc": "demo/images/galleria/galleria15.jpg", "itemImageSrc": "demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg", "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15", "alt": "Description for Image 15",
"title": "Title 15" "title": "Title 15"
@ -151,7 +151,7 @@ export default {
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images" :numVisible="5"&gt; &lt;Galleria :value="images" :numVisible="5"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
@ -166,7 +166,7 @@ export default {
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
@ -199,7 +199,7 @@ responsiveOptions: [
&lt;h1&gt;Header&lt;/h1&gt; &lt;h1&gt;Header&lt;/h1&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;h1&gt;Footer&lt;/h1&gt; &lt;h1&gt;Footer&lt;/h1&gt;
@ -213,7 +213,7 @@ responsiveOptions: [
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images" :showIndicators="true"&gt; &lt;Galleria :value="images" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</CodeHighlight> </CodeHighlight>
@ -403,12 +403,12 @@ responsiveOptions: [
<td>Footer section.</td> <td>Footer section.</td>
</tr> </tr>
<tr> <tr>
<td>p-galleria-preview-content</td> <td>p-galleria-item-wrapper</td>
<td>Preview content element. It contains preview and indicator containers.</td> <td>Item wrapper element. It contains item container and indicators.</td>
</tr> </tr>
<tr> <tr>
<td>p-galleria-preview-container</td> <td>p-galleria-item-container</td>
<td>Container of the preview content. It contains navigation buttons, preview item and caption content.</td> <td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
</tr> </tr>
<tr> <tr>
<td>p-galleria-indicators</td> <td>p-galleria-indicators</td>
@ -423,8 +423,8 @@ responsiveOptions: [
<td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td> <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
</tr> </tr>
<tr> <tr>
<td>p-galleria-preview-caption</td> <td>p-galleria-caption</td>
<td>Content of the preview caption.</td> <td>Content of the item caption.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -442,7 +442,7 @@ responsiveOptions: [
<template v-pre> <template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;

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

@ -12,7 +12,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"> :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -25,7 +25,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"> :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -38,7 +38,7 @@
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"> :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -61,7 +61,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
@ -74,7 +74,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
@ -87,7 +87,7 @@
&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" &lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;

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

@ -12,7 +12,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true"> :showThumbnails="false" :showIndicators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -20,7 +20,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -28,7 +28,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -36,7 +36,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -44,7 +44,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -52,7 +52,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
@ -60,10 +60,10 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #indicator="{index}"> <template #indicator="{index}">
<span style="color: #e9ecef; cursor: pointer"> <span class="indicator-text">
{{index + 1}} {{index + 1}}
</span> </span>
</template> </template>
@ -79,7 +79,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true"&gt; :showThumbnails="false" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -87,7 +87,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -95,7 +95,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -103,7 +103,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -111,7 +111,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -119,7 +119,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -127,7 +127,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #indicator="{index}"&gt; &lt;template #indicator="{index}"&gt;
&lt;span style="color: #e9ecef; cursor: pointer"&gt; &lt;span style="color: #e9ecef; cursor: pointer"&gt;
@ -173,6 +173,23 @@ export default {
}); });
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep {
.custom-indicator-galleria {
.indicator-text {
color: #e9ecef;
cursor: pointer;
}
.p-highlight {
.indicator-text {
color: var(--primary-color);
}
}
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>
@ -216,3 +233,20 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
::v-deep {
.custom-indicator-galleria {
.indicator-text {
color: #e9ecef;
cursor: pointer;
}
.p-highlight {
.indicator-text {
color: var(--primary-color);
}
}
}
}
</style>

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

@ -12,7 +12,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true"> :showItemNavigators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -23,7 +23,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false"> :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -34,7 +34,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true"> :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -45,7 +45,7 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true"> :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
@ -62,7 +62,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true"&gt; :showItemNavigators="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
@ -73,7 +73,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false"&gt; :showItemNavigators="true" :showThumbnails="false"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
@ -84,7 +84,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true"&gt; :showItemNavigators="true" :showItemNavigatorsOnHover="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
@ -95,7 +95,7 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true"&gt; :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;

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

@ -15,7 +15,7 @@
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"> <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
@ -35,7 +35,7 @@
&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;

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

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

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

@ -11,7 +11,7 @@
<h3>Positioned at Bottom</h3> <h3>Positioned at Bottom</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
@ -19,9 +19,9 @@
</Galleria> </Galleria>
<h3>Positioned at Left</h3> <h3>Positioned at Left</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
@ -31,9 +31,9 @@
</Galleria> </Galleria>
<h3>Positioned at Right</h3> <h3>Positioned at Right</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
@ -45,7 +45,7 @@
<h3>Positioned at Top</h3> <h3>Positioned at Top</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
@ -61,7 +61,7 @@
&lt;h3&gt;Positioned at Bottom&lt;/h3&gt; &lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
@ -69,9 +69,9 @@
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;h3&gt;Positioned at Left&lt;/h3&gt; &lt;h3&gt;Positioned at Left&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
@ -81,9 +81,9 @@
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;h3&gt;Positioned at Right&lt;/h3&gt; &lt;h3&gt;Positioned at Right&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
@ -95,7 +95,7 @@
&lt;h3&gt;Positioned at Top&lt;/h3&gt; &lt;h3&gt;Positioned at Top&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;

4
src/views/treetable/TreeTableColResizeDemo.vue
View File

@ -16,7 +16,7 @@
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
</TreeTable> </TreeTable>
<h3>Expand Mdoe</h3> <h3>Expand Mode</h3>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"> <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand">
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
@ -36,7 +36,7 @@
&lt;Column field="type" header="Type"&gt;&lt;/Column&gt; &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
&lt;h3&gt;Expand Mdoe&lt;/h3&gt; &lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"&gt; &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;&lt;/Column&gt; &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;

2
src/views/treetable/TreeTableDoc.vue
View File

@ -1173,7 +1173,7 @@ export default {
&lt;Column field="type" header="Type"&gt;&lt;/Column&gt; &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
&lt;h3&gt;Expand Mdoe&lt;/h3&gt; &lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"&gt; &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand"&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;&lt;/Column&gt; &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;