vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update carousel docs

Browse source
This commit is contained in:
Cagatay Civici 2023-10-25 12:14:33 +03:00
parent eeee947dbc
commit 7d9545964d
6 changed files with 104 additions and 384 deletions
Download patch file Download diff file Expand all files Collapse all files

87
doc/carousel/VerticalDoc.vue
View file

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" containerStyle="max-width: 30rem" 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="mb-3">
@ -14,10 +14,9 @@
<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="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>
</div>
</div>
@ -34,27 +33,10 @@ export default {
data() {
return {
products: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
],
code: {
basic: `
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
:responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
containerStyle="max-width: 30rem" 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="mb-3">
@ -64,10 +46,9 @@ export default {
<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="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>
</div>
</div>
@ -78,7 +59,7 @@ export default {
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
:responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
containerStyle="max-width: 30rem" 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="mb-3">
@ -88,10 +69,9 @@ export default {
<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="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>
</div>
</div>
@ -106,24 +86,7 @@ import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]
products: null
};
},
mounted() {
@ -152,8 +115,8 @@ export default {
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
:responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
containerStyle="max-width: 30rem" 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="mb-3">
@ -184,23 +147,7 @@ onMounted(() => {
})
const products = ref();
const responsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]);
const getSeverity = (status) => {
switch (status) {
case 'INSTOCK':