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

Carousel themes,demo and doc pages added

pull/104/head
Merve Özçifçi 2019-10-22 11:15:29 +03:00
parent eb0d3a0b7b
commit 0c22cd244a
16 changed files with 41329 additions and 20735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/carousel.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export * from './components/carousel/Carousel';

2
exports/carousel.js Normal file
View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/carousel/Carousel.vue');

14212
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/luna-amber/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/luna-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/luna-green/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/luna-pink/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/nova-colored/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/nova-dark/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/nova-light/theme.css
View File

File diff suppressed because it is too large Load Diff

5916
public/themes/rhea/theme.css
View File

File diff suppressed because it is too large Load Diff

1
src/AppMenu.vue
View File

@ -56,6 +56,7 @@
<transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 2">
<div>
<router-link to="/carousel">&#9679; Carousel</router-link>
<router-link to="/datatable">&#9679; DataTable</router-link>
<router-link to="/dataview">&#9679; DataView</router-link>
<router-link to="/fullcalendar">&#9679; FullCalendar</router-link>

21
src/components/carousel/Carousel.d.ts vendored Normal file
View File

@ -0,0 +1,21 @@
import Vue, {VNode} from 'vue';
export declare class Carousel extends Vue {
value?: any;
page?: number;
numVisible?: number;
numScroll?: number;
responsiveOptions?: any[];
orientation?: string;
verticalViewPortHeight?: string;
containerClass?: string;
dotsContentClass?: string;
contentClass?: string;
circular?: boolean;
autoplayInterval?: number;
$slots: {
item: VNode[];
header: VNode[];
footer: VNode[];
}
}

20
src/components/carousel/Carousel.vue
View File

@ -1,18 +1,16 @@
<template>
<div :id="id" :class="containerClass">
<div :id="id" :class="['p-carousel p-component', {'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical()}]">
<div class="p-carousel-header" v-if="$scopedSlots.header">
<slot name="header"></slot>
</div>
<div :class="contentClasses">
<div class="p-carousel-container">
<div :class="containerClasses">
<button :class="['p-carousel-prev p-button', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward">
<span :class="['p-carousel-prev-icon pi', {'pi-chevron-left': !isVertical(),'pi-chevron-up': isVertical()}]"></span>
</button>
<div class="p-carousel-items-content" :style="[{'height': isVertical() ? verticalViewPortHeight : 'auto'}]">
<div ref="itemsContainer" class="p-carousel-items-container"
@transitionend="onTransitionEnd" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
<!--<CarouselItem v-bind="{ scopedSlots: $scopedSlots }" :value="value" :start="firstIndex()" :end="lastIndex()" v-if="$scopedSlots.item"></CarouselItem>-->
<div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
<template v-if="isCircular()">
<div v-for="(item, index) of value.slice(-1 * d_numVisible)" :key="index + '_scloned'" :class="['p-carousel-item p-carousel-item-cloned',
{'p-carousel-item-active': (totalShiftedItems * -1) === (value.length + d_numVisible),
@ -67,8 +65,6 @@ export default {
type: Number,
default: 0
},
//header: null,
//footer: null,
numVisible: {
type: Number,
default: 1
@ -87,6 +83,7 @@ export default {
default: '300px'
},
contentClass: String,
containerClass: String,
dotsContentClass: String,
circular: {
type: Boolean,
@ -99,6 +96,7 @@ export default {
},
data() {
return {
id : UniqueComponentId(),
remainingItems: 0,
d_numVisible: this.numVisible,
d_numScroll: this.numScroll,
@ -107,7 +105,6 @@ export default {
d_oldValue: null,
d_page: this.page,
totalShiftedItems: this.page * this.numScroll * -1,
id : UniqueComponentId(),
allowAutoplay : !!this.autoplayInterval,
d_circular : this.circular || this.allowAutoplay
}
@ -480,11 +477,8 @@ export default {
forwardIsDisabled() {
return (this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === (this.totalDots - 1) || this.totalDots === 0));
},
containerClass() {
return ['p-carousel p-component', {
'p-carousel-vertical': this.isVertical(),
'p-carousel-horizontal': !this.isVertical()
}];
containerClasses() {
return ['p-carousel-container', this.containerClass];
},
contentClasses() {
return ['p-carousel-content ', this.contentClass];

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

@ -3,14 +3,14 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Carousel</h1>
<p>Carousel.</p>
<p>Carousel is a content slider featuring various customization options.</p>
</div>
</div>
<div class="content-section implementation">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h2>Basic</h2>
<h3>Basic</h3>
</template>
<template #item="slotProps">
<div class="car-details">
@ -34,7 +34,7 @@
</Carousel>
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h2>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h2>
<h3>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h3>
</template>
<template #item="slotProps">
<div class="car-details">
@ -59,7 +59,7 @@
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" :responsiveOptions="responsiveOptions" verticalViewPortHeight="330px"
style="max-width: 400px; margin-top: 2em">
<template #header>
<h2>Vertical</h2>
<h3>Vertical</h3>
</template>
<template #item="slotProps">
<div class="car-details">
@ -82,11 +82,14 @@
</template>
</Carousel>
</div>
<CarouselDoc/>
</div>
</template>
<script>
import CarService from "../../service/CarService";
import CarouselDoc from "./CarouselDoc";
export default {
data() {
@ -118,12 +121,14 @@ export default {
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
},
name: "CarouselDemo",
components: {
'CarouselDoc': CarouselDoc
},
}
</script>
<style>
.carousel-demo .p-carousel .p-carousel-content .p-carousel-item .car-details > .p-grid {
.carousel-demo .car-details > .p-grid {
border: 1px solid #b3c2ca;
border-radius: 3px;
margin: .3em;
@ -131,21 +136,21 @@ export default {
padding: 2em 0 2.25em 0;
}
.carousel-demo .p-carousel .p-carousel-content .p-carousel-item .car-data .car-title {
.carousel-demo .car-data .car-title {
font-weight: 700;
font-size: 20px;
margin-top: 24px;
}
.carousel-demo .p-carousel .p-carousel-content .p-carousel-item .car-data .car-subtitle {
.carousel-demo .car-data .car-subtitle {
margin: .25em 0 2em 0;
}
.carousel-demo .p-carousel .p-carousel-content .p-carousel-item .car-data button {
.carousel-demo .car-data button {
margin-left: .5em;
}
.carousel-demo .p-carousel .p-carousel-content .p-carousel-item .car-data button:first-child {
.carousel-demo .car-data button:first-child {
margin-left: 0;
}

454
src/views/carousel/CarouselDoc.vue Normal file
View File

@ -0,0 +1,454 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import Carousel from 'primevue/carousel';
</CodeHighlight>
<h3>Getting Started</h3>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<CodeHighlight>
&lt;Carousel :value="cars"&gt;&lt;/Carousel&gt;
</CodeHighlight>
<h3>Templates</h3>
<p>Carousel provides <i>header</i>, <i>item</i> and <i>footer</i> as the named templates to place content.</p>
<CodeHighlight>
<template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="car-details"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-12"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 car-data"&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</template>
</CodeHighlight>
<h3>Items per page and Scroll Items</h3>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
&lt;template #item="slotProps"&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Responsive</h3>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
objects whose breakpoint defines the max-width to apply the settings.</p>
<CodeHighlight>
<template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="car-details"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-12"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 car-data"&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="js">
data() {
return {
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]
}
},
</CodeHighlight>
<h3>Header and Footer</h3>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Custom Header&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
Content
&lt;/template&gt;
&lt;template #footer&gt;
&lt;h2&gt;Custom Footer&lt;/h2&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Orientation</h3>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
&lt;template #item="slotProps"&gt;
Content
&lt;/template&gt;
&lt;/Carousel&gt;
</CodeHighlight>
<h3>AutoPlay and Circular</h3>
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<CodeHighlight>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt;
&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
Content
&lt;/template&gt;
&lt;/Carousel&gt;
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of objects to display.</td>
</tr>
<tr>
<td>page</td>
<td>number</td>
<td>null</td>
<td>Index of the first item.</td>
</tr>
<tr>
<td>circular</td>
<td>boolean</td>
<td>false</td>
<td>Defines if scrolling would be infinite.</td>
</tr>
<tr>
<td>autoplayInterval</td>
<td>number</td>
<td>null</td>
<td>Time in milliseconds to scroll items automatically.</td>
</tr>
<tr>
<td>numVisible</td>
<td>number</td>
<td>1</td>
<td>Number of items per page.</td>
</tr>
<tr>
<td>numScroll</td>
<td>number</td>
<td>1</td>
<td>Number of items to scroll.</td>
</tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr>
<tr>
<td>verticalViewPortHeight</td>
<td>string</td>
<td>300px</td>
<td>Height of the viewport in vertical layout.</td>
</tr>
<tr>
<td>contentClass</td>
<td>string</td>
<td>null</td>
<td>Style class of main content.</td>
</tr>
<tr>
<td>containerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the viewport container.</td>
</tr>
<tr>
<td>dotsContainerClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the paginator items.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-carousel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-carousel-header</td>
<td>Header section.</td>
</tr>
<tr>
<td>p-carousel-footer</td>
<td>Footer section.</td>
</tr>
<tr>
<td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td>
</tr>
<tr>
<td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr>
<tr>
<td>p-carousel-items-content</td>
<td>Viewport.</td>
</tr>
<tr>
<td>p-carousel-dots-container</td>
<td>Container of the paginator.</td>
</tr>
<tr>
<td>p-carousel-dot-item</td>
<td>Paginator element.</td>
</tr>
<tr>
<td>p-carousel-dot-icon</td>
<td>Paginator element icon.</td>
</tr>
</tbody>
</table>
</div>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="car-details"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-12"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 car-data"&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt;
&lt;h2&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="car-details"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-12"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 car-data"&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" :responsiveOptions="responsiveOptions" verticalViewPortHeight="330px"
style="max-width: 400px; margin-top: 2em"&gt;
&lt;template #header&gt;
&lt;h2&gt;Vertical&lt;/h2&gt;
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="car-details"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-12"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 car-data"&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
&lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Carousel&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from "../../service/CarService";
export default {
data() {
return {
cars: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]
}
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
},
}
</CodeHighlight>
<CodeHighlight lang="css">
.carousel-demo .car-details > .p-grid {
border: 1px solid #b3c2ca;
border-radius: 3px;
margin: .3em;
text-align: center;
padding: 2em 0 2.25em 0;
}
.carousel-demo .car-data .car-title {
font-weight: 700;
font-size: 20px;
margin-top: 24px;
}
.carousel-demo .car-data .car-subtitle {
margin: .25em 0 2em 0;
}
.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;
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>