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

Image demo updates

pull/3919/head^2
Tuğçe Küçükoğlu 2023-05-03 20:56:09 +03:00
parent cbdf8e934a
commit d0dd241b02
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/image/PreviewDoc.vue
View File

@ -3,11 +3,7 @@
<p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p> <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
<template #imagePreview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" :style="slotProps.imagePreviewStyle" @click="slotProps.previewImageClick" />
</template>
</Image>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />

32
doc/image/TemplateDoc.vue
View File

@ -3,10 +3,16 @@
<p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> slot for custom content.</p> <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> slot for custom content.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</template> </template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image> </Image>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -18,28 +24,46 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</template> </template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image>`, </Image>`,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</template> </template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image> </Image>
</div> </div>
</template>`, </template>`,
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
</template> </template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image> </Image>
</div> </div>
</template>` </template>`