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

Galleria thumbnail demo fixes

pull/5838/head
tugcekucukoglu 2024-06-03 12:41:47 +03:00
parent 27ab8ee07b
commit 3efe61c605
3 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/galleria/AdvancedDoc.vue
View File

@ -31,7 +31,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? '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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -105,7 +105,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? '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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? '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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -300,7 +300,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? '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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>

8
doc/galleria/ThumbnailDoc.vue
View File

@ -15,7 +15,7 @@
<img :src="slotProps.item.itemImageSrc" :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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </template>
@ -68,7 +68,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -88,7 +88,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :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="grid grid-cols-12 gap-4 justify-center"> <div class="grid gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>

5
pages/galleria/index.vue
View File

@ -10,6 +10,7 @@ import BasicDoc from '@/doc/galleria/BasicDoc.vue';
import CaptionDoc from '@/doc/galleria/CaptionDoc.vue'; import CaptionDoc from '@/doc/galleria/CaptionDoc.vue';
import ControlledDoc from '@/doc/galleria/ControlledDoc.vue'; import ControlledDoc from '@/doc/galleria/ControlledDoc.vue';
import ImportDoc from '@/doc/galleria/ImportDoc.vue'; import ImportDoc from '@/doc/galleria/ImportDoc.vue';
import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc.vue';
import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc.vue'; import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc.vue';
import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc.vue'; import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc.vue';
import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc.vue'; import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc.vue';
@ -70,12 +71,12 @@ export default {
component: TemplateDoc component: TemplateDoc
} }
] ]
} /*, },
{ {
id: 'thumbnail', id: 'thumbnail',
label: 'Thumbnail', label: 'Thumbnail',
component: ThumbnailDoc component: ThumbnailDoc
},*/, },
{ {
id: 'responsive', id: 'responsive',
label: 'Responsive', label: 'Responsive',