diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue index d00eaf133e..8a19ae76a8 100644 --- a/src/views/galleria/GalleriaAdvancedDemo.vue +++ b/src/views/galleria/GalleriaAdvancedDemo.vue @@ -9,7 +9,7 @@
-<Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :containerClass="galleriaClass"
+<Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
diff --git a/src/views/galleria/GalleriaAutoPlayDemo.vue b/src/views/galleria/GalleriaAutoPlayDemo.vue
index 1737b5214d..5a7ed282e7 100755
--- a/src/views/galleria/GalleriaAutoPlayDemo.vue
+++ b/src/views/galleria/GalleriaAutoPlayDemo.vue
@@ -9,7 +9,7 @@
-
@@ -26,7 +26,7 @@
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<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;" />
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index c6df10044b..915b7f25ba 100755
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -9,7 +9,7 @@
-
+
@@ -31,7 +31,7 @@
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+<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>
diff --git a/src/views/galleria/GalleriaDemo.vue b/src/views/galleria/GalleriaDemo.vue
index ff93ea9712..6cd5d5fc1b 100755
--- a/src/views/galleria/GalleriaDemo.vue
+++ b/src/views/galleria/GalleriaDemo.vue
@@ -9,7 +9,7 @@
-
+
diff --git a/src/views/galleria/GalleriaDoc.vue b/src/views/galleria/GalleriaDoc.vue
index 8ef3959a18..bf4bdfb88c 100755
--- a/src/views/galleria/GalleriaDoc.vue
+++ b/src/views/galleria/GalleriaDoc.vue
@@ -211,7 +211,7 @@ responsiveOptions: [
Custom content projection is available using the header and footer properties.
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #header>
<h1>Header</h1>
</template>
@@ -460,7 +460,7 @@ responsiveOptions: [
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+<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>
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index de772c789b..f42f89fb3c 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -10,7 +10,7 @@
Indicators with Click Event
-
@@ -20,7 +20,7 @@
Indicators with Hover Event
-
@@ -30,7 +30,7 @@
Inside Content
-
@@ -40,7 +40,7 @@
Positioned at Top
-
@@ -50,7 +50,7 @@
Positioned at Left
-
@@ -60,7 +60,7 @@
Positioned at Right
-
@@ -70,7 +70,7 @@
Indicator Template
-
@@ -90,7 +90,7 @@
<h3>Indicators with Click Event</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<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;" />
@@ -98,7 +98,7 @@
</Galleria>
<h3>Indicators with Hover Event</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<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;" />
@@ -106,7 +106,7 @@
</Galleria>
<h3>Inside Content</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -114,7 +114,7 @@
</Galleria>
<h3>Positioned at Top</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -122,7 +122,7 @@
</Galleria>
<h3>Positioned at Left</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :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;" />
@@ -130,7 +130,7 @@
</Galleria>
<h3>Positioned at Right</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -138,7 +138,7 @@
</Galleria>
<h3>Indicator Template</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" class="custom-indicator-galleria"
: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;" />
diff --git a/src/views/galleria/GalleriaNavigatorDemo.vue b/src/views/galleria/GalleriaNavigatorDemo.vue
index 4e5644a0ec..fc04d24fec 100755
--- a/src/views/galleria/GalleriaNavigatorDemo.vue
+++ b/src/views/galleria/GalleriaNavigatorDemo.vue
@@ -10,7 +10,7 @@
Item Navigators and Thumbnails
-
@@ -23,7 +23,7 @@
Item Navigators without Thumbnails
-
@@ -36,7 +36,7 @@
Item Navigators on Hover
-
@@ -49,7 +49,7 @@
Item Navigators and Indicators
-
@@ -67,7 +67,7 @@
<h3>Item Navigators and Thumbnails</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
+<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;" />
@@ -78,7 +78,7 @@
</Galleria>
<h3>Item Navigators without Thumbnails</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
+<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;" />
@@ -89,7 +89,7 @@
</Galleria>
<h3>Item Navigators on Hover</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
+<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;" />
@@ -100,7 +100,7 @@
</Galleria>
<h3>Item Navigators and Indicators</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
+<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;" />
diff --git a/src/views/galleria/GalleriaProgrammaticDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
index 5cf8d9d47b..b0d66186a2 100644
--- a/src/views/galleria/GalleriaProgrammaticDemo.vue
+++ b/src/views/galleria/GalleriaProgrammaticDemo.vue
@@ -14,7 +14,7 @@
-
+
@@ -35,7 +35,7 @@
<Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
</div>
-<Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+<Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index 5b632893b3..83ae8f906c 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -10,7 +10,7 @@
Positioned at Bottom
-
+
@@ -22,7 +22,7 @@
Positioned at Left
-
+
@@ -36,7 +36,7 @@
Positioned at Right
-
+
@@ -50,7 +50,7 @@
Positioned at Top
-
+
@@ -67,7 +67,7 @@
<h3>Positioned at Bottom</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+<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;" />
</template>
@@ -77,7 +77,7 @@
</Galleria>
<h3>Positioned at Left</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
@@ -89,7 +89,7 @@
</Galleria>
<h3>Positioned at Right</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
@@ -101,7 +101,7 @@
</Galleria>
<h3>Positioned at Top</h3>
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>