2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div class="content-section introduction">
|
|
|
|
<div class="feature-intro">
|
|
|
|
<h1>Galleria <span>Caption</span></h1>
|
|
|
|
<p>Caption displays a description for an item.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
<div class="card">
|
|
|
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
|
|
|
|
<template #item="{ item }">
|
2022-12-09 20:47:59 +00:00
|
|
|
<img :src="baseUrl + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</template>
|
|
|
|
<template #thumbnail="{ item }">
|
|
|
|
<div class="grid grid-nogutter justify-content-center">
|
2022-12-09 20:47:59 +00:00
|
|
|
<img :src="baseUrl + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template #caption="{ item }">
|
|
|
|
<h4 style="margin-bottom: 0.5rem">{{ item.title }}</h4>
|
|
|
|
<p>{{ item.alt }}</p>
|
|
|
|
</template>
|
|
|
|
</Galleria>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-section documentation">
|
|
|
|
<TabView>
|
|
|
|
<TabPanel header="Source">
|
2022-12-20 17:28:51 +00:00
|
|
|
<pre v-code><code>
|
2022-09-09 20:41:18 +00:00
|
|
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
|
|
|
|
<template #item="{item}">
|
|
|
|
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
|
|
|
|
</template>
|
|
|
|
<template #thumbnail="{item}">
|
|
|
|
<div class="grid grid-nogutter justify-content-center">
|
|
|
|
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template #caption="{item}">
|
2022-12-20 17:28:51 +00:00
|
|
|
<h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
|
|
|
|
<p>{{item.alt}}</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
</template>
|
|
|
|
</Galleria>
|
2022-12-20 17:28:51 +00:00
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
</code></pre>
|
|
|
|
|
|
|
|
<pre v-code.script><code>
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</code></pre>
|
|
|
|
</TabPanel>
|
|
|
|
</TabView>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import PhotoService from '../../service/PhotoService';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
images: null,
|
|
|
|
responsiveOptions: [
|
|
|
|
{
|
|
|
|
breakpoint: '1024px',
|
|
|
|
numVisible: 5
|
|
|
|
},
|
|
|
|
{
|
|
|
|
breakpoint: '768px',
|
|
|
|
numVisible: 3
|
|
|
|
},
|
|
|
|
{
|
|
|
|
breakpoint: '560px',
|
|
|
|
numVisible: 1
|
|
|
|
}
|
2022-12-09 20:47:59 +00:00
|
|
|
],
|
2022-12-27 07:23:26 +00:00
|
|
|
baseUrl: process.dev ? '' : '/primevue-nuxt'
|
2022-09-09 20:41:18 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
galleriaService: null,
|
|
|
|
created() {
|
|
|
|
this.galleriaService = new PhotoService();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.galleriaService.getImages().then((data) => (this.images = data));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|