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

Galleria responsive updates

pull/4683/head
Tuğçe Küçükoğlu 2023-10-23 12:26:04 +03:00
parent c91d53e085
commit 78ac1b8159
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
doc/galleria/ResponsiveDoc.vue
View File

@ -2,17 +2,17 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p> <p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card md:flex md:justify-content-center"> <div class="card">
<div> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px"> <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" /> </template>
</template> <template #thumbnail="slotProps">
<template #thumbnail="slotProps"> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </div>
</Galleria> </template>
</div> </Galleria>
</div> </div>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -40,24 +40,28 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" 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" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template> </template>
</Galleria> </Galleria>
`, `,
options: ` options: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" 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" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -94,13 +98,15 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card md:flex md:justify-content-center"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" 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" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template> </template>
</Galleria> </Galleria>
</div> </div>