vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

169
doc/galleria/fullscreen/WithThumbnailsDoc.vue Normal file
View file

@ -0,0 +1,169 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '1500px',
numVisible: 5
},
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
],
displayBasic: false,
code: {
basic: `
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '1500px',
numVisible: 5
},
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
],
displayBasic: false
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { PhotoService } from '@/service/PhotoService';
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '1500px',
numVisible: 5
},
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
]);
const displayBasic = ref(false);
onMounted(() => {
PhotoService.getImages().then((data) => (images.value = data));
})
<\/script>`,
data: `
/* PhotoService */
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
...
`
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
}
};
</script>