primevue-mirror/apps/showcase/doc/galleria/ControlledDoc.vue

186 lines
5.8 KiB
Vue
Raw Permalink Normal View History

2023-02-28 08:29:30 +00:00
<template>
<DocSectionText v-bind="$attrs">
<p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
</DocSectionText>
2024-02-21 07:31:43 +00:00
<DeferredDemo @load="loadDemoData">
<div class="card">
2024-05-20 12:14:38 +00:00
<div class="mb-4">
2024-02-21 07:31:43 +00:00
<Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div>
2023-02-28 08:29:30 +00:00
2024-02-21 07:31:43 +00:00
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</DeferredDemo>
2023-02-28 08:29:30 +00:00
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
activeIndex: 2,
responsiveOptions: [
{
2023-10-26 18:39:49 +00:00
breakpoint: '1300px',
2023-02-28 08:29:30 +00:00
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
],
code: {
2023-09-22 12:54:14 +00:00
basic: `
<div>
2023-02-28 08:29:30 +00:00
<Button icon="pi pi-minus" @click="prev" />
2023-03-03 12:15:20 +00:00
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
2023-02-28 08:29:30 +00:00
</div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
2023-10-15 09:38:39 +00:00
</Galleria>
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2023-10-04 09:32:01 +00:00
<div class="card">
2024-05-20 12:14:38 +00:00
<div class="mb-4">
2023-02-28 08:29:30 +00:00
<Button icon="pi pi-minus" @click="prev" />
2023-03-03 12:15:20 +00:00
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
2023-02-28 08:29:30 +00:00
</div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
activeIndex: 2,
responsiveOptions: [
{
2023-10-26 18:39:49 +00:00
breakpoint: '1300px',
2023-02-28 08:29:30 +00:00
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: {
next() {
2023-08-18 11:49:38 +00:00
this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
2023-02-28 08:29:30 +00:00
},
prev() {
2023-08-18 11:49:38 +00:00
this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
2023-02-28 08:29:30 +00:00
}
}
};
2023-10-15 09:38:39 +00:00
<\/script>
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2023-10-04 09:32:01 +00:00
<div class="card">
2024-05-20 12:14:38 +00:00
<div class="mb-4">
2023-02-28 08:29:30 +00:00
<Button icon="pi pi-minus" @click="prev" />
2023-03-03 12:15:20 +00:00
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
2023-02-28 08:29:30 +00:00
</div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { PhotoService } from '@/service/PhotoService';
onMounted(() => {
PhotoService.getImages().then((data) => (images.value = data));
});
const images = ref();
const activeIndex = ref(2);
const responsiveOptions = ref([
{
2023-10-26 18:39:49 +00:00
breakpoint: '1300px',
2023-02-28 08:29:30 +00:00
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]);
const next = () => {
2023-08-18 11:49:38 +00:00
activeIndex.value = activeIndex.value === images.value.length - 1 ? images.value.length - 1 : activeIndex.value + 1;
2023-02-28 08:29:30 +00:00
};
const prev = () => {
2023-08-18 11:49:38 +00:00
activeIndex.value = activeIndex.value === 0 ? 0 : activeIndex.value - 1;
2023-02-28 08:29:30 +00:00
};
2023-10-15 09:38:39 +00:00
<\/script>
`,
2023-02-28 08:29:30 +00:00
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'
},
...
`
}
};
},
methods: {
2024-02-21 07:31:43 +00:00
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
2023-02-28 08:29:30 +00:00
next() {
2023-08-18 11:49:38 +00:00
this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
2023-02-28 08:29:30 +00:00
},
prev() {
2023-08-18 11:49:38 +00:00
this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
2023-02-28 08:29:30 +00:00
}
}
};
</script>