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

Update galleria sample

pull/6011/head
Cagatay Civici 2024-07-01 15:49:01 +03:00
parent 36df703f61
commit 9f847dd712
1 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
apps/showcase/doc/galleria/AdvancedDoc.vue
View File

@ -24,7 +24,7 @@
content: { content: {
class: ['relative', { 'flex-1 justify-center': fullScreen }] class: ['relative', { 'flex-1 justify-center': fullScreen }]
}, },
thumbnailwrapper: 'absolute w-full left-0 bottom-0' thumbnails: 'absolute w-full left-0 bottom-0'
}" }"
> >
<template #item="slotProps"> <template #item="slotProps">
@ -36,15 +36,19 @@
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="flex items-center bg-black/90 text-white"> <div class="flex items-stretch bg-surface-950 text-white h-10">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <i class="pi pi-th-large"></i>
<span v-if="images" class="title-container"> </button>
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span> <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span> <span v-if="images" class="flex items-center gap-4 ml-3">
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span> <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
<span class="text-sm">{{ images[activeIndex].alt }}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
<i :class="fullScreenIcon"></i>
</button>
</div> </div>
</template> </template>
</Galleria> </Galleria>
@ -97,8 +101,7 @@ export default {
content: { content: {
class: ['relative', { 'flex-1 justify-center': fullScreen }] class: ['relative', { 'flex-1 justify-center': fullScreen }]
}, },
thumbnails: 'absolute w-full left-0 bottom-0'
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}" }"
> >
<template #item="slotProps"> <template #item="slotProps">
@ -110,15 +113,19 @@ export default {
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="flex items-center bg-black/90 text-white"> <div class="flex items-stretch bg-surface-950 text-white h-10">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <i class="pi pi-th-large"></i>
<span v-if="images" class="title-container"> </button>
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span> <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span> <span v-if="images" class="flex items-center gap-4 ml-3">
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span> <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
<span class="text-sm">{{ images[activeIndex].alt }}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
<i :class="fullScreenIcon"></i>
</button>
</div> </div>
</template> </template>
</Galleria> </Galleria>
@ -146,8 +153,7 @@ export default {
content: { content: {
class: ['relative', { 'flex-1 justify-center': fullScreen }] class: ['relative', { 'flex-1 justify-center': fullScreen }]
}, },
thumbnails: 'absolute w-full left-0 bottom-0'
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}" }"
> >
<template #item="slotProps"> <template #item="slotProps">
@ -159,15 +165,19 @@ export default {
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="flex items-center bg-black/90 text-white"> <div class="flex items-stretch bg-surface-950 text-white h-10">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <i class="pi pi-th-large"></i>
<span v-if="images" class="title-container"> </button>
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span> <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span> <span v-if="images" class="flex items-center gap-4 ml-3">
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span> <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
<span class="text-sm">{{ images[activeIndex].alt }}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
<i :class="fullScreenIcon"></i>
</button>
</div> </div>
</template> </template>
</Galleria> </Galleria>
@ -292,8 +302,7 @@ export default {
content: { content: {
class: ['relative', { 'flex-1 justify-center': fullScreen }] class: ['relative', { 'flex-1 justify-center': fullScreen }]
}, },
thumbnails: 'absolute w-full left-0 bottom-0'
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}" }"
> >
<template #item="slotProps"> <template #item="slotProps">
@ -305,15 +314,19 @@ export default {
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="flex items-center bg-black/90 text-white"> <div class="flex items-stretch bg-surface-950 text-white h-10">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="onThumbnailButtonClick" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3">
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <i class="pi pi-th-large"></i>
<span v-if="images" class="title-container"> </button>
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span> <button type="button" @click="toggleAutoSlide" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3"><i :class="slideButtonIcon"></i></button>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span> <span v-if="images" class="flex items-center gap-4 ml-3">
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span> <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm">{{ images[activeIndex].title }}</span>
<span class="text-sm">{{ images[activeIndex].alt }}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" /> <button type="button" @click="toggleFullScreen" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto">
<i :class="fullScreenIcon"></i>
</button>
</div> </div>
</template> </template>
</Galleria> </Galleria>