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

Update carousel demos, fixed dataview visual bug with hidden icon

pull/5161/head
Cagatay Civici 2024-01-24 12:08:37 +03:00
parent 2003071593
commit d4748cbebb
24 changed files with 273 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
doc/carousel/BasicDoc.vue
View File

@ -6,19 +6,21 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -59,19 +61,21 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -81,19 +85,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -159,19 +165,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>

88
doc/carousel/CircularDoc.vue
View File

@ -6,19 +6,21 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -59,19 +61,21 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -81,19 +85,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -159,19 +165,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>

89
doc/carousel/ResponsiveDoc.vue
View File

@ -9,19 +9,21 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -62,19 +64,21 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -84,19 +88,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -162,20 +168,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" rounded severity="help" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>

91
doc/carousel/VerticalDoc.vue
View File

@ -6,19 +6,21 @@
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -37,19 +39,21 @@ export default {
basic: `
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -59,19 +63,21 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="secondary" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
@ -115,23 +121,24 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
<Button icon="pi pi-cog" rounded severity="help" />
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
</span>
</div>
</div>
</template>
</Carousel>
</Carousel>
</div>
</template>

4
public/themes/aura-dark-amber/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(250, 183, 8, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-blue/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(62, 146, 249, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-cyan/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(17, 200, 227, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-green/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(42, 195, 139, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-indigo/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(93, 107, 246, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-lime/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(151, 227, 28, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-noir/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(225, 225, 225, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-pink/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(241, 81, 165, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-purple/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(139, 102, 248, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-dark-teal/theme.css
View File

@ -6118,6 +6118,10 @@
border-bottom-color: rgba(39, 192, 173, 0.16);
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #18181b;

4
public/themes/aura-light-amber/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #fff1ba;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-blue/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #bedaff;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-cyan/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #bbfbff;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-green/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #c0f8de;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-indigo/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #bdccff;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-lime/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #e7fcb8;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-noir/theme.css
View File

@ -6128,6 +6128,10 @@
border-bottom-color: #020515;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-pink/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #f6c7e1;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-purple/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #ccc1ff;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;

4
public/themes/aura-light-teal/theme.css
View File

@ -6120,6 +6120,10 @@
border-bottom-color: #c5f7ec;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
position: relative;
}
.p-dialog {
border-radius: 12px;
background-color: #ffffff;