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

New demos

pull/358/head
cagataycivici 2020-07-01 14:22:33 +03:00
parent b602d165a9
commit 07c1e8a88a
1 changed files with 60 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/carousel/CarouselDemo.vue
View File

@ -9,24 +9,24 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"> <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header> <template #header>
<h5>Basic</h5> <h5 class="p-mb-0">Basic</h5>
</template> </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="car-item"> <div class="product-item">
<div class="car-content"> <div class="product-item-content">
<div> <div class="p-mb-3">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<div class="car-title">{{slotProps.data.brand}}</div> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div> <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons"> <div class="car-buttons p-mt-3">
<Button icon="pi pi-search" class="p-button-secondary" /> <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
<Button icon="pi pi-star" class="p-button-secondary" /> <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
<Button icon="pi pi-cog" class="p-button-secondary" /> <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -36,24 +36,24 @@
</div> </div>
<div class="card"> <div class="card">
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"> <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header> <template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5> <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
</template> </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="car-item"> <div class="product-item">
<div class="car-content"> <div class="product-item-content">
<div> <div class="p-mb-3">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<div class="car-title">{{slotProps.data.brand}}</div> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div> <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons"> <div class="car-buttons p-mt-3">
<Button icon="pi pi-search" class="p-button-secondary" /> <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
<Button icon="pi pi-star" class="p-button-secondary" /> <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
<Button icon="pi pi-cog" class="p-button-secondary" /> <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -63,25 +63,25 @@
</div> </div>
<div class="card"> <div class="card">
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px" <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
style="max-width: 400px; margin-top: 2em"> style="max-width: 400px; margin-top: 2em">
<template #header> <template #header>
<h5>Vertical</h5> <h5>Vertical</h5>
</template> </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="car-item"> <div class="product-item">
<div class="car-content"> <div class="product-item-content">
<div> <div class="p-mb-3">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<div class="car-title">{{slotProps.data.brand}}</div> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div> <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons"> <div class="car-buttons p-mt-3">
<Button icon="pi pi-search" class="p-button-secondary" /> <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
<Button icon="pi pi-star" class="p-button-secondary" /> <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
<Button icon="pi pi-cog" class="p-button-secondary" /> <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -97,11 +97,13 @@
<script> <script>
import CarService from "../../service/CarService"; import CarService from "../../service/CarService";
import ProductService from '../../service/ProductService';
import CarouselDoc from "./CarouselDoc"; import CarouselDoc from "./CarouselDoc";
export default { export default {
data() { data() {
return { return {
products: null,
cars: null, cars: null,
responsiveOptions: [ responsiveOptions: [
{ {
@ -122,12 +124,15 @@ export default {
] ]
} }
}, },
carService: null, carService: null,
productService: null,
created() { created() {
this.carService = new CarService(); this.carService = new CarService();
this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
}, },
components: { components: {
'CarouselDoc': CarouselDoc 'CarouselDoc': CarouselDoc
@ -136,6 +141,21 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.product-item {
.product-item-content {
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2rem 0;
}
.product-image {
width: 150px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
}
.p-carousel { .p-carousel {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -143,32 +163,4 @@ export default {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
} }
.car-item {
.car-content {
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2em 0 2.25em 0;
}
.car-title {
font-weight: 600;
font-size: 20px;
margin-top: 24px;
}
.car-subtitle {
margin: .25em 0 2em 0;
}
button {
margin-left: .5rem;
&:first-child {
margin-left: 0;
}
}
}
</style> </style>