mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Update carousel demos, fixed dataview visual bug with hidden icon
This commit is contained in:
Cagatay Civici
parent
2003071593
commit
d4748cbebb
24 changed files with 273 additions and 163 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue