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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@ -48,7 +48,7 @@ export default {
</Galleria>`, </Galleria>`,
options: ` options: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@ -90,7 +90,7 @@ export default {
<\/script>`, <\/script>`,
composition: ` composition: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <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> <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
</DocSectionText> </DocSectionText>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -56,7 +56,7 @@ export default {
</Galleria>`, </Galleria>`,
options: ` options: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@ -102,7 +102,7 @@ export default {
<\/script>`, <\/script>`,
composition: ` composition: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex flex-column align-items-center"> <div class="card">
<div class="flex flex-wrap gap-3 mb-5"> <div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center"> <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" /> <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
@ -59,7 +59,7 @@ export default {
</Galleria>`, </Galleria>`,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card">
<div class="flex flex-wrap gap-3 mb-5"> <div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center"> <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<RadioButton :value="option.value" /> <RadioButton :value="option.value" />
@ -114,7 +114,7 @@ export default {
<\/script>`, <\/script>`,
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card">
<div class="flex flex-wrap gap-3 mb-5"> <div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center"> <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<RadioButton :value="option.value" /> <RadioButton :value="option.value" />

View File

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

View File

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

View File

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

View File

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

View File

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