vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Galleria ve API doc updates

pull/4546/head^2^2
Tuğçe Küçükoğlu 2023-10-04 12:32:01 +03:00
parent f7ed95af6c
commit 371fdaf898
15 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/doc/DocApiTable.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText :id="id" :label="label" :level="componentLevel">
{{ description || null }}
<p>{{ description || null }}</p>
<p v-if="relatedProp" class="inline-block">
See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedPropValue(relatedProp) }} </NuxtLink>
</p>

6
doc/galleria/AdvancedDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Advanced Galleria implementation with a custom UI.</p>
</DocSectionText>
<div class="card flex justify-content-center galleria demo">
<div class="card">
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
@ -81,7 +81,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center galleria demo">
<div class="card">
<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps">
@ -260,7 +260,7 @@ export default {
</style>`,
composition: `
<template>
<div class="card flex justify-content-center galleria demo">
<div class="card">
<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps">

6
doc/galleria/AutoPlayDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -49,7 +49,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
@ -92,7 +92,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">

6
doc/galleria/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%" />
@ -48,7 +48,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%" />
@ -90,7 +90,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%" />

6
doc/galleria/CaptionDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%; display: block" />
@ -56,7 +56,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%; display: block" />
@ -102,7 +102,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<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%; display: block" />

12
doc/galleria/ControlledDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
</DocSectionText>
<div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center">
<div class="card">
<div class="mb-3">
<Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div>
@ -59,8 +59,8 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center">
<div class="card">
<div class="mb-3">
<Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div>
@ -115,8 +115,8 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex flex-column md:align-items-center">
<div class="mb-3 align-self-center">
<div class="card">
<div class="mb-3">
<Button icon="pi pi-minus" @click="prev" />
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div>

6
doc/galleria/ThumbnailDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Thumbnails represent a smaller version of the actual content.</p>
</DocSectionText>
<div class="card flex flex-column md:align-items-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5 align-self-center">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@ -79,7 +79,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card card flex flex-column md:align-items-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5 align-self-center">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@ -150,7 +150,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex flex-column md:align-items-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5 align-self-center">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">

6
doc/galleria/indicator/ClickEventDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -43,7 +43,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
@ -83,7 +83,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">

6
doc/galleria/indicator/HoverEventDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -43,7 +43,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
@ -83,7 +83,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">

6
doc/galleria/indicator/PositionDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
@ -59,7 +59,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<RadioButton :value="option.value" />
@ -114,7 +114,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<RadioButton :value="option.value" />

6
doc/galleria/indicator/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -49,7 +49,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
:showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
@ -78,7 +78,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
:showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">

6
doc/galleria/navigator/HoverDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -48,7 +48,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -90,7 +90,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />

6
doc/galleria/navigator/IndicatorsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Navigators and Indicators can be combined as well.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -49,7 +49,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">
@ -92,7 +92,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">

6
doc/galleria/navigator/ItemThumbnailsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -49,7 +49,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true">
<template #item="slotProps">
@ -92,7 +92,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true">
<template #item="slotProps">

6
doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Simple example with indicators only.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -49,7 +49,7 @@ export default {
</Galleria>`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
@ -92,7 +92,7 @@ export default {
<\/script>`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">