primevue-mirror/pages/galleria/Caption.vue

122 lines
3.8 KiB
Vue
Raw Normal View History

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
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="{item}"&gt;
&lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="{item}"&gt;
&lt;div class="grid grid-nogutter justify-content-center"&gt;
&lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #caption="{item}"&gt;
2022-12-20 17:28:51 +00:00
&lt;h4 style="margin-bottom: .5rem;"&gt;&#123;&#123;item.title&#125;&#125;&lt;/h4&gt;
&lt;p&gt;&#123;&#123;item.alt&#125;&#125;&lt;/p&gt;
2022-09-09 20:41:18 +00:00
&lt;/template&gt;
&lt;/Galleria&gt;
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
],
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>