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

Refactor on CarouselDemo

pull/104/head
mertsincan 2019-10-22 16:14:42 +03:00
parent b7fafa647c
commit b7d4b542a5
1 changed files with 81 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div class="carousel-demo"> <div>
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>Carousel</h1> <h1>Carousel</h1>
@ -56,7 +56,7 @@
</div> </div>
</template> </template>
</Carousel> </Carousel>
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" :responsiveOptions="responsiveOptions" verticalViewPortHeight="330px" <Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px"
style="max-width: 400px; margin-top: 2em"> style="max-width: 400px; margin-top: 2em">
<template #header> <template #header>
<h3>Vertical</h3> <h3>Vertical</h3>
@ -127,44 +127,86 @@ export default {
} }
</script> </script>
<style> <style lang="scss" scoped>
.carousel-demo .car-details > .p-grid { .p-carousel {
border: 1px solid #b3c2ca; .p-carousel-content {
border-radius: 3px; .p-carousel-item {
margin: .3em; .car-details {
text-align: center; > .p-grid {
padding: 2em 0 2.25em 0; border: 1px solid #b3c2ca;
border-radius: 3px;
margin: .3em;
text-align: center;
padding: 2em 0 2.25em 0;
}
}
.car-data {
.car-title {
font-weight: 700;
font-size: 20px;
margin-top: 24px;
}
.car-subtitle {
margin: .25em 0 2em 0;
}
button {
margin-left: .5em;
&:first-child {
margin-left: 0;
}
}
}
}
}
&.custom-carousel {
.p-carousel-dot-icon {
width: 16px !important;
height: 16px !important;
border-radius: 50%;
}
}
&.p-carousel-horizontal {
.p-carousel-content {
.p-carousel-item {
&.p-carousel-item-start {
.car-details {
> .p-grid {
margin-left: .6em;
}
}
}
&.p-carousel-item-end {
.car-details {
> .p-grid {
margin-right: .6em;
}
}
}
}
}
}
} }
.carousel-demo .car-data .car-title { /* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
font-weight: 700; .dark-theme {
font-size: 20px; .p-carousel {
margin-top: 24px; .p-carousel-content {
} .p-carousel-item {
.car-details {
.carousel-demo .car-data .car-subtitle { > .p-grid {
margin: .25em 0 2em 0; border: 1px solid #191919;
} background-color: #323232;
}
.carousel-demo .car-data button { }
margin-left: .5em; }
} }
}
.carousel-demo .car-data button:first-child {
margin-left: 0;
}
.carousel-demo .p-carousel.custom-carousel .p-carousel-dot-icon {
width: 16px !important;
height: 16px !important;
border-radius: 50%;
}
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-start .car-details > .p-grid {
margin-left: .6em;
}
.carousel-demo .p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-item.p-carousel-item-end .car-details > .p-grid {
margin-right: .6em;
} }
</style> </style>