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

prop name updated

pull/3813/head
Furkan Sezis 2023-04-04 02:25:13 +03:00
parent c1fab8f3fb
commit 85b6c807c3
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
doc/galleria/AdvancedDoc.vue
View File

@ -14,7 +14,7 @@
:showItemNavigators="true" :showItemNavigators="true"
:showItemNavigatorsOnHover="true" :showItemNavigatorsOnHover="true"
:circular="true" :circular="true"
:autoPlay="isPlayed" :autoPlay="isAutoPlay"
:transitionInterval="3000" :transitionInterval="3000"
> >
<template #item="slotProps"> <template #item="slotProps">
@ -53,11 +53,11 @@ export default {
showThumbnails: false, showThumbnails: false,
isAutoPlayActive: true, isAutoPlayActive: true,
fullScreen: false, fullScreen: false,
isPlayed: true, isAutoPlay: true,
code: { code: {
basic: ` basic: `
<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="isPlayed" :transitionInterval="3000"> :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
@ -83,7 +83,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center galleria demo"> <div class="card flex justify-content-center galleria demo">
<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="isPlayed" :transitionInterval="3000"> :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
@ -118,7 +118,7 @@ export default {
activeIndex: 0, activeIndex: 0,
showThumbnails: false, showThumbnails: false,
fullScreen: false, fullScreen: false,
isPlayed: true, isAutoPlay: true,
}; };
}, },
mounted() { mounted() {
@ -127,7 +127,7 @@ export default {
}, },
methods: { methods: {
toggleAutoSlide() { toggleAutoSlide() {
this.isPlayed = !this.isPlayed; this.isAutoPlay = !this.isAutoPlay;
}, },
onThumbnailButtonClick() { onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails; this.showThumbnails = !this.showThumbnails;
@ -184,7 +184,7 @@ export default {
}, },
computed: { computed: {
slideButtonIcon() { slideButtonIcon() {
return this.isPlayed ? 'pi pi-pause' : 'pi pi-play'; return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
}, },
galleriaClass() { galleriaClass() {
return ['custom-galleria', { fullscreen: this.fullScreen }]; return ['custom-galleria', { fullscreen: this.fullScreen }];
@ -262,7 +262,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center galleria demo"> <div class="card flex justify-content-center galleria demo">
<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="isPlayed" :transitionInterval="3000"> :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
@ -301,10 +301,10 @@ const images = ref();
const activeIndex = ref(0); const activeIndex = ref(0);
const showThumbnails = ref(false); const showThumbnails = ref(false);
const fullScreen = ref(false); const fullScreen = ref(false);
const isPlayed = ref(true); const isAutoPlay = ref(true);
const toggleAutoSlide = () => { const toggleAutoSlide = () => {
isPlayed.value = !isPlayed.value ; isAutoPlay.value = !isAutoPlay.value ;
}; };
const onThumbnailButtonClick = () => { const onThumbnailButtonClick = () => {
showThumbnails.value = !showThumbnails.value ; showThumbnails.value = !showThumbnails.value ;
@ -368,7 +368,7 @@ const fullScreenIcon = computed(() => {
return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`; return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
}); });
const slideButtonIcon = computed(() => { const slideButtonIcon = computed(() => {
return \`pi \${isPlayed.value ? 'pi-pause' : 'pi-play'}\`; return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
}); });
<\/script> <\/script>
@ -453,7 +453,7 @@ const slideButtonIcon = computed(() => {
}, },
methods: { methods: {
toggleAutoSlide() { toggleAutoSlide() {
this.isPlayed = !this.isPlayed; this.isAutoPlay = !this.isAutoPlay;
}, },
onThumbnailButtonClick() { onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails; this.showThumbnails = !this.showThumbnails;
@ -510,7 +510,7 @@ const slideButtonIcon = computed(() => {
}, },
computed: { computed: {
slideButtonIcon() { slideButtonIcon() {
return this.isPlayed ? 'pi pi-pause' : 'pi pi-play'; return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
}, },
galleriaClass() { galleriaClass() {
return ['custom-galleria', { fullscreen: this.fullScreen }]; return ['custom-galleria', { fullscreen: this.fullScreen }];