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

Optimized response breakpoints

pull/4704/head
Cagatay Civici 2023-10-26 21:39:49 +03:00
parent 5102cc089e
commit b98d0a5123
18 changed files with 189 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layout/_responsive.scss
View File

@ -12,7 +12,7 @@
}
@media screen and (max-width: 991px) {
@media screen and (max-width: 1199px) {
.layout-topbar-inner {
padding-left: 2rem;
padding-right: 2rem;

44
doc/carousel/BasicDoc.vue
View File

@ -40,17 +40,17 @@ export default {
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -108,23 +108,23 @@ export default {
return {
products: null,
responsiveOptions: [
{
{
breakpoint: '1400px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -194,17 +194,17 @@ const responsiveOptions = ref([
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}

42
doc/carousel/CircularDoc.vue
View File

@ -40,17 +40,17 @@ export default {
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -114,17 +114,17 @@ export default {
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -194,17 +194,17 @@ const responsiveOptions = ref([
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}

42
doc/carousel/ResponsiveDoc.vue
View File

@ -43,17 +43,17 @@ export default {
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -117,17 +117,17 @@ export default {
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -198,17 +198,17 @@ const responsiveOptions = ref([
numScroll: 1
},
{
breakpoint: '1200px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}

77
doc/carousel/pt/PTDoc.vue
View File

@ -19,9 +19,9 @@
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
</div>
</div>
</div>
@ -40,17 +40,22 @@ export default {
products: null,
responsiveOptions: [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
breakpoint: '1400px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -75,9 +80,9 @@ export default {
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
</div>
</div>
</div>
@ -105,9 +110,9 @@ export default {
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
</div>
</div>
</div>
@ -125,17 +130,22 @@ export default {
products: null,
responsiveOptions: [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
breakpoint: '1400px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -186,9 +196,9 @@ export default {
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
</div>
</div>
</div>
@ -208,17 +218,22 @@ onMounted(() => {
const products = ref();
const responsiveOptions = ref([
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
breakpoint: '1400px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '575px',
numVisible: 1,
numScroll: 1
}
@ -243,7 +258,7 @@ const getSeverity = (status) => {
<\/script>
`,
data: `
/* ProductService */
/* ProductService */
{
id: '1000',
code: 'f230fh0g3',

37
doc/galleria/AdvancedDoc.vue
View File

@ -15,6 +15,7 @@
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
@ -22,7 +23,6 @@
content: {
class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
},
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}"
>
@ -63,6 +63,16 @@ export default {
isAutoPlayActive: true,
fullScreen: false,
isAutoPlay: true,
responsiveOptions: [
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
],
code: {
basic: `
<Galleria
@ -77,6 +87,7 @@ export default {
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
@ -125,6 +136,7 @@ export default {
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
@ -171,6 +183,16 @@ export default {
showThumbnails: false,
fullScreen: false,
isAutoPlay: true,
responsiveOptions: [
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]
};
},
mounted() {
@ -260,6 +282,7 @@ export default {
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
@ -317,6 +340,18 @@ const toggleAutoSlide = () => {
const onThumbnailButtonClick = () => {
showThumbnails.value = !showThumbnails.value ;
};
const responsiveOptions = ref([
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]);
const toggleFullScreen = () => {
if (fullScreen.value ) {
closeFullScreen();

18
doc/galleria/AutoPlayDoc.vue
View File

@ -24,13 +24,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -72,13 +68,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -118,13 +110,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

18
doc/galleria/BasicDoc.vue
View File

@ -24,13 +24,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -70,13 +66,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -115,13 +107,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

18
doc/galleria/CaptionDoc.vue
View File

@ -28,13 +28,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -82,13 +78,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -131,13 +123,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

18
doc/galleria/ControlledDoc.vue
View File

@ -30,13 +30,9 @@ export default {
activeIndex: 2,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -87,13 +83,9 @@ export default {
activeIndex: 2,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -146,13 +138,9 @@ const images = ref();
const activeIndex = ref(2);
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

20
doc/galleria/ResponsiveDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
<p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
</DocSectionText>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
@ -26,13 +26,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -76,13 +72,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -123,13 +115,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

24
doc/galleria/ThumbnailDoc.vue
View File

@ -9,7 +9,7 @@
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
</div>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
@ -51,13 +51,9 @@ export default {
],
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -65,7 +61,7 @@ export default {
],
code: {
basic: `
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
@ -85,7 +81,7 @@ export default {
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
</div>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
@ -126,13 +122,9 @@ export default {
],
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -194,13 +186,9 @@ const positionOptions = ref([
]);
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

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

@ -3,7 +3,7 @@
<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">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<Galleria :value="images" :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" />
</template>
@ -19,23 +19,9 @@ export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
],
code: {
basic: `
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -45,7 +31,7 @@ export default {
options: `
<template>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -60,21 +46,7 @@ import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
]
images: null
};
},
mounted() {
@ -86,7 +58,7 @@ export default {
composition: `
<template>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -104,20 +76,6 @@ onMounted(() => {
});
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
]);
<\/script>
`,
data: `

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

@ -3,7 +3,7 @@
<p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
</DocSectionText>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<Galleria :value="images" :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" />
</template>
@ -19,23 +19,9 @@ export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
],
code: {
basic: `
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -45,7 +31,7 @@ export default {
options: `
<template>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -60,21 +46,7 @@ import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
]
images: null
};
},
mounted() {
@ -86,7 +58,7 @@ export default {
composition: `
<template>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
<Galleria :value="images" :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" />
@ -104,20 +76,6 @@ onMounted(() => {
});
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
]);
<\/script>
`,
data: `

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

@ -22,20 +22,6 @@ export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
],
code: {
basic: `
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"

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

@ -24,13 +24,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -70,13 +66,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -115,13 +107,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

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

@ -24,13 +24,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -72,13 +68,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -118,13 +110,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1

20
doc/galleria/pt/PTDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs"></DocSectionText>
<div class="card md:flex md:justify-content-center">
<div class="card">
<Galleria
:value="images"
:responsiveOptions="responsiveOptions"
@ -29,13 +29,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -89,13 +85,9 @@ export default {
images: null,
responsiveOptions: [
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
@ -141,13 +133,9 @@ onMounted(() => {
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1