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

Add source code

pull/358/head
cagataycivici 2020-07-01 14:34:41 +03:00
parent 07c1e8a88a
commit 95e0cfe13f
2 changed files with 86 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@
<div class="card"> <div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"> <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header> <template #header>
<h5 class="p-mb-0">Basic</h5> <h5>Basic</h5>
</template> </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
@ -23,10 +23,10 @@
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <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> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-3"> <div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button-text p-button-rounded" /> <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-text p-button-rounded" /> <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-text p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -50,10 +50,10 @@
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <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> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-3"> <div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button-text p-button-rounded" /> <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-text p-button-rounded" /> <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-text p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -78,10 +78,10 @@
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <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> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-3"> <div class="car-buttons p-mt-5">
<Button icon="pi pi-search" class="p-button-text p-button-rounded" /> <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
<Button icon="pi pi-star" class="p-button-text p-button-rounded" /> <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
<Button icon="pi pi-cog" class="p-button-text p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
</div> </div>
@ -96,7 +96,6 @@
</template> </template>
<script> <script>
import CarService from "../../service/CarService";
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
import CarouselDoc from "./CarouselDoc"; import CarouselDoc from "./CarouselDoc";
@ -104,7 +103,6 @@ export default {
data() { data() {
return { return {
products: null, products: null,
cars: null,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -124,19 +122,16 @@ export default {
] ]
} }
}, },
carService: null,
productService: null, productService: null,
created() { created() {
this.carService = new CarService();
this.productService = new ProductService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9)); this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
}, },
components: { components: {
'CarouselDoc': CarouselDoc 'CarouselDoc': CarouselDoc
}, }
} }
</script> </script>
@ -151,16 +146,8 @@ export default {
} }
.product-image { .product-image {
width: 150px; width: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
} }
} }
.p-carousel {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0rem;
}
}
</style> </style>

149
src/views/carousel/CarouselDoc.vue
View File

@ -265,90 +265,96 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt; &lt;div class="card"&gt;
&lt;template #header&gt; &lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;h2&gt;Basic&lt;/h2&gt; &lt;template #header&gt;
&lt;/template&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;template #item="slotProps"&gt; &lt;/template&gt;
&lt;div class="car-item"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="car-content"&gt; &lt;div class="product-item"&gt;
&lt;div&gt; &lt;div class="product-item-content"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt; &lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt; &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt; &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons"&gt; &lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
&lt;/div&gt;
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt; &lt;div class="card"&gt;
&lt;template #header&gt; &lt;Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
&lt;h2&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h2&gt; &lt;template #header&gt;
&lt;/template&gt; &lt;h5&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h5&gt;
&lt;template #item="slotProps"&gt; &lt;/template&gt;
&lt;div class="car-item"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="car-content"&gt; &lt;div class="product-item"&gt;
&lt;div&gt; &lt;div class="product-item-content"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt; &lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt; &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt; &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons"&gt; &lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
&lt;/div&gt;
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" :responsiveOptions="responsiveOptions" verticalViewPortHeight="330px" &lt;div class="card"&gt;
style="max-width: 400px; margin-top: 2em"&gt; &lt;Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
&lt;template #header&gt; style="max-width: 400px; margin-top: 2em"&gt;
&lt;h2&gt;Vertical&lt;/h2&gt; &lt;template #header&gt;
&lt;/template&gt; &lt;h5&gt;Vertical&lt;/h5&gt;
&lt;template #item="slotProps"&gt; &lt;/template&gt;
&lt;div class="car-item"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="car-content"&gt; &lt;div class="product-item"&gt;
&lt;div&gt; &lt;div class="product-item-content"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt; &lt;div class="p-mb-3"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt; &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt; &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
&lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;div class="car-buttons"&gt; &lt;div class="car-buttons p-mt-5"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from "../../service/CarService"; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -368,42 +374,29 @@ export default {
] ]
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
}, }
} }
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.car-item { .product-item {
.car-content { .product-item-content {
border: 1px solid var(--layer-2); border: 1px solid var(--surface-d);
border-radius: 3px; border-radius: 3px;
margin: .3rem; margin: .3rem;
text-align: center; text-align: center;
padding: 2em 0 2.25em 0; padding: 2rem 0;
} }
.car-title { .product-image {
font-weight: 600; width: 50%;
font-size: 20px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
margin-top: 24px;
}
.car-subtitle {
margin: .25em 0 2em 0;
}
button {
margin-left: .5rem;
&:first-child {
margin-left: 0;
}
} }
} }
</CodeHighlight> </CodeHighlight>