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

Refactor on galleria demo pages

pull/345/head
mertsincan 2020-05-20 22:26:44 +03:00
parent ac2f718b18
commit eba832d958
2 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -63,7 +63,7 @@
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #indicator="{index}"> <template #indicator="{index}">
<span style="color: #e9ecef; cursor: pointer"> <span class="indicator-text">
{{index + 1}} {{index + 1}}
</span> </span>
</template> </template>
@ -173,6 +173,23 @@ export default {
}); });
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep {
.custom-indicator-galleria {
.indicator-text {
color: #e9ecef;
cursor: pointer;
}
.p-highlight {
.indicator-text {
color: var(--primary-color);
}
}
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>
@ -216,3 +233,20 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
::v-deep {
.custom-indicator-galleria {
.indicator-text {
color: #e9ecef;
cursor: pointer;
}
.p-highlight {
.indicator-text {
color: var(--primary-color);
}
}
}
}
</style>

8
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -19,7 +19,7 @@
</Galleria> </Galleria>
<h3>Positioned at Left</h3> <h3>Positioned at Left</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
@ -31,7 +31,7 @@
</Galleria> </Galleria>
<h3>Positioned at Right</h3> <h3>Positioned at Right</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
@ -69,7 +69,7 @@
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;h3&gt;Positioned at Left&lt;/h3&gt; &lt;h3&gt;Positioned at Left&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
@ -81,7 +81,7 @@
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;h3&gt;Positioned at Right&lt;/h3&gt; &lt;h3&gt;Positioned at Right&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;