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> <p>Image is used similar to the standard <i>img</i> element.</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/galleria7.jpg" alt="Image" width="250" /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,19 +14,19 @@ export default {
return { return {
code: { code: {
basic: ` 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: ` 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/galleria7.jpg" alt="Image" width="250" /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</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/galleria7.jpg" alt="Image" width="250" /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div> </div>
</template>` </template>`
} }

2
doc/image/PreviewDoc.vue
View File

@ -15,7 +15,7 @@ export default {
return { return {
code: { code: {
basic: ` 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: ` options: `
<template> <template>

32
doc/image/TemplateDoc.vue
View File

@ -1,17 +1,20 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image alt="Image" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-search"></i>
</template> </template>
<template #image> <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>
<template #preview="slotProps"> <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> </template>
</Image> </Image>
</div> </div>
@ -26,13 +29,13 @@ export default {
basic: ` basic: `
<Image alt="Image" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-search"></i>
</template> </template>
<template #image> <template #image>
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" /> <img src="/thumbnail.jpg" alt="image" />
</template> </template>
<template #preview="slotProps"> <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> </template>
</Image> </Image>
`, `,
@ -41,13 +44,13 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image alt="Image" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-search"></i>
</template> </template>
<template #image> <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>
<template #preview="slotProps"> <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> </template>
</Image> </Image>
</div> </div>
@ -58,17 +61,18 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image alt="Image" preview> <Image alt="Image" preview>
<template #indicatoricon> <template #indicatoricon>
<i class="pi pi-check"></i> <i class="pi pi-search"></i>
</template> </template>
<template #image> <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>
<template #preview="slotProps"> <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> </template>
</Image> </Image>
</div> </div>
</template>` </template>
`
} }
}; };
} }