545 lines
22 KiB
Vue
Executable File
545 lines
22 KiB
Vue
Executable File
<template>
|
|
<div class="content-section documentation">
|
|
<TabView>
|
|
<TabPanel header="Documentation">
|
|
<h5>Import via Module</h5>
|
|
<pre v-code.script><code>
|
|
import Galleria from 'primevue/galleria';
|
|
|
|
</code></pre>
|
|
|
|
<h5>Import via CDN</h5>
|
|
<pre v-code><code>
|
|
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
|
<script src="https://unpkg.com/primevue@^3/galleria/galleria.min.js"></script>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Getting Started</h5>
|
|
<p>Galleria requires item template and a value as an array of objects.</p>
|
|
<pre v-code><code>
|
|
<Galleria :value="images">
|
|
<template #item="slotProps">
|
|
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" />
|
|
</template>
|
|
</Galleria>
|
|
|
|
</code></pre>
|
|
|
|
<p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
|
|
<div style="overflow: auto; height: 400px">
|
|
<pre v-code.script><code>
|
|
{
|
|
"data":[
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria1.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
|
|
"alt": "Description for Image 1",
|
|
"title": "Title 1"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria2.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
|
|
"alt": "Description for Image 2",
|
|
"title": "Title 2"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria3.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
|
|
"alt": "Description for Image 3",
|
|
"title": "Title 3"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria4.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
|
|
"alt": "Description for Image 4",
|
|
"title": "Title 4"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria5.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
|
|
"alt": "Description for Image 5",
|
|
"title": "Title 5"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria6.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
|
|
"alt": "Description for Image 6",
|
|
"title": "Title 6"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria7.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
|
|
"alt": "Description for Image 7",
|
|
"title": "Title 7"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria8.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
|
|
"alt": "Description for Image 8",
|
|
"title": "Title 8"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria9.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
|
|
"alt": "Description for Image 9",
|
|
"title": "Title 9"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria10.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
|
|
"alt": "Description for Image 10",
|
|
"title": "Title 10"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria11.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
|
|
"alt": "Description for Image 11",
|
|
"title": "Title 11"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria12.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
|
|
"alt": "Description for Image 12",
|
|
"title": "Title 12"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria13.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
|
|
"alt": "Description for Image 13",
|
|
"title": "Title 13"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria14.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
|
|
"alt": "Description for Image 14",
|
|
"title": "Title 14"
|
|
},
|
|
{
|
|
"itemImageSrc": "demo/images/galleria/galleria15.jpg",
|
|
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
|
|
"alt": "Description for Image 15",
|
|
"title": "Title 15"
|
|
}
|
|
]
|
|
}
|
|
|
|
</code></pre>
|
|
</div>
|
|
|
|
<pre v-code.script><code>
|
|
export default class PhotoService {
|
|
|
|
getImages() {
|
|
return fetch('demo/data/photos.json').then(res => res.json())
|
|
.then(d => d.data);
|
|
}
|
|
}
|
|
|
|
</code></pre>
|
|
|
|
<pre v-code.script><code>
|
|
export default {
|
|
data() {
|
|
return {
|
|
images: null
|
|
}
|
|
},
|
|
galleriaService: null,
|
|
created() {
|
|
this.galleriaService = new PhotoService();
|
|
},
|
|
mounted() {
|
|
this.galleriaService.getImages().then(data => this.images = data);
|
|
}
|
|
}
|
|
|
|
</code></pre>
|
|
|
|
<h5>Items per page</h5>
|
|
<p>Number of items per page is defined using the <i>numVisible</i> property.</p>
|
|
|
|
<pre v-code><code>
|
|
<Galleria :value="images" :numVisible="5">
|
|
<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>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Responsive</h5>
|
|
<p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of objects whose breakpoint defines the max-width to apply the settings.</p>
|
|
|
|
<pre v-code><code>
|
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5">
|
|
<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>
|
|
|
|
</code></pre>
|
|
|
|
<pre v-code.script><code>
|
|
responsiveOptions: [
|
|
{
|
|
breakpoint: '1024px',
|
|
numVisible: 5
|
|
},
|
|
{
|
|
breakpoint: '768px',
|
|
numVisible: 3
|
|
},
|
|
{
|
|
breakpoint: '560px',
|
|
numVisible: 1
|
|
}
|
|
]
|
|
|
|
</code></pre>
|
|
|
|
<h5>Header and Footer</h5>
|
|
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
|
|
<pre v-code><code>
|
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
|
|
<template #header>
|
|
<h1>Header</h1>
|
|
</template>
|
|
<template #item="slotProps">
|
|
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
|
</template>
|
|
<template #footer>
|
|
<h1>Footer</h1>
|
|
</template>
|
|
</Galleria>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Indicators</h5>
|
|
<p>
|
|
Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and
|
|
<i>indicatorsPosition</i> properties.
|
|
</p>
|
|
<pre v-code><code>
|
|
<Galleria :value="images" :showIndicators="true">
|
|
<template #item="slotProps">
|
|
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" />
|
|
</template>
|
|
</Galleria>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Properties</h5>
|
|
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>id</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Unique identifier of the element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>value</td>
|
|
<td>array</td>
|
|
<td>null</td>
|
|
<td>An array of objects to display.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>activeIndex</td>
|
|
<td>number</td>
|
|
<td>0</td>
|
|
<td>Index of the first item.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fullScreen</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Whether to display the component on fullscreen.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>visible</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Specifies the visibility of the mask on fullscreen mode.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>numVisible</td>
|
|
<td>number</td>
|
|
<td>3</td>
|
|
<td>Number of items per page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>responsiveOptions</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>An array of options for responsive design.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showItemNavigators</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Whether to display navigation buttons in item section.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showThumbnailNavigators</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Whether to display navigation buttons in thumbnail container.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showItemNavigatorsOnHover</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Whether to display navigation buttons on item hover.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>changeItemOnIndicatorHover</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When enabled, item is changed on indicator hover.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>circular</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Defines if scrolling would be infinite.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>autoPlay</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Items are displayed with a slideshow in autoPlay mode.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>transitionInterval</td>
|
|
<td>number</td>
|
|
<td>4000</td>
|
|
<td>Time in milliseconds to scroll items.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showThumbnails</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Whether to display thumbnail container.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>thumbnailsPosition</td>
|
|
<td>string</td>
|
|
<td>bottom</td>
|
|
<td>Position of thumbnails. Valid values are "bottom", "top", "left" and "right".</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verticalThumbnailViewPortHeight</td>
|
|
<td>string</td>
|
|
<td>300px</td>
|
|
<td>Height of the viewport in vertical thumbnail.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showIndicators</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Whether to display indicator container.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showIndicatorsOnItem</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When enabled, indicator container is displayed on item container.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>indicatorsPosition</td>
|
|
<td>string</td>
|
|
<td>bottom</td>
|
|
<td>Position of indicators. Valid values are "bottom", "top", "left" and "right".</td>
|
|
</tr>
|
|
<tr>
|
|
<td>baseZIndex</td>
|
|
<td>number</td>
|
|
<td>0</td>
|
|
<td>Base zIndex value to use in layering.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>maskClass</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the mask on fullscreen mode.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>containerStyle</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>containerClass</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Slots</h5>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Parameters</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>header</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>footer</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>item</td>
|
|
<td>item: Item instance</td>
|
|
</tr>
|
|
<tr>
|
|
<td>caption</td>
|
|
<td>item: Item instance</td>
|
|
</tr>
|
|
<tr>
|
|
<td>thumbnail</td>
|
|
<td>item: Item instance</td>
|
|
</tr>
|
|
<tr>
|
|
<td>indicator</td>
|
|
<td>index: Index of the indicator item</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Styling</h5>
|
|
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Element</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>p-galleria</td>
|
|
<td>Container element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-header</td>
|
|
<td>Header section.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-footer</td>
|
|
<td>Footer section.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-item-wrapper</td>
|
|
<td>Item wrapper element. It contains item container and indicators.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-item-container</td>
|
|
<td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-indicators</td>
|
|
<td>Container of the indicators. It contains indicator items.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-thumbnail-content</td>
|
|
<td>Thumbnail content element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-thumbnail-container</td>
|
|
<td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-galleria-caption</td>
|
|
<td>Content of the item caption.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Dependencies</h5>
|
|
<p>None.</p>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Source">
|
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
|
<span>View on GitHub</span>
|
|
</a>
|
|
<pre v-code><code><template v-pre>
|
|
<Galleria :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>
|
|
</template>
|
|
</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>
|
|
</template>
|