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

Update image demos

pull/4694/head
Cagatay Civici 2023-10-25 11:56:59 +03:00
parent 3d46104b50
commit eeee947dbc
3 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/image/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>Image is used similar to the standard <i>img</i> element.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,19 +14,19 @@ export default {
return {
code: {
basic: `
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
<Image src="/image.jpg" alt="Image" width="250" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
</template>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
</template>`
}

2
doc/image/PreviewDoc.vue
View File

@ -15,7 +15,7 @@ export default {
return {
code: {
basic: `
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
<Image src="/image.jpg" alt="Image" width="250" preview />
`,
options: `
<template>

32
doc/image/TemplateDoc.vue
View File

@ -1,17 +1,20 @@
<template>
<DocSectionText v-bind="$attrs">
<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>indicatoricon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
image respectively.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Image alt="Image" preview>
<template #indicatoricon>
<i class="pi pi-check"></i>
<i class="pi pi-search"></i>
</template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image>
</div>
@ -26,13 +29,13 @@ export default {
basic: `
<Image alt="Image" preview>
<template #indicatoricon>
<i class="pi pi-check"></i>
<i class="pi pi-search"></i>
</template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
<img src="/thumbnail.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" />
<img src="/image.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image>
`,
@ -41,13 +44,13 @@ export default {
<div class="card flex justify-content-center">
<Image alt="Image" preview>
<template #indicatoricon>
<i class="pi pi-check"></i>
<i class="pi pi-search"></i>
</template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image>
</div>
@ -58,17 +61,18 @@ export default {
<div class="card flex justify-content-center">
<Image alt="Image" preview>
<template #indicatoricon>
<i class="pi pi-check"></i>
<i class="pi pi-search"></i>
</template>
<template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
</template>
<template #preview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
</template>
</Image>
</div>
</template>`
</template>
`
}
};
}