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

Updated docs of DataView

pull/12/head
cagataycivici 2019-05-24 12:29:52 +03:00
parent bd3bb4e35e
commit f66e2b45f4
3 changed files with 308 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dataview/DataView.vue
View File

@ -15,8 +15,8 @@
<div class="p-dataview-content">
<div class="p-grid">
<template v-for="(item,index) of items">
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot>
<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
</template>
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
</div>
@ -98,6 +98,10 @@
sortOrder: {
type: Number,
default: null
},
lazy: {
type: Boolean,
default: false
}
},
data() {

4
src/views/dataview/DataViewDemo.vue
View File

@ -20,7 +20,7 @@
</div>
</div>
</template>
<template #listItem="slotProps" >
<template #list="slotProps" >
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
<div class="p-grid">
<div class="p-col-12 p-md-3">
@ -43,7 +43,7 @@
</div>
</div>
</template>
<template #gridItem="slotProps">
<template #grid="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3">
<Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>

201
src/views/dataview/DataViewDoc.vue
View File

@ -11,28 +11,30 @@ import DataView from 'primevue/dataview';
<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
<CodeHighlight lang="js">
<template v-pre>
data() {
export default {
data() {
return {
cars: null,
}
},
carService: null,
created() {
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
},
mounted() {
this.carService.getCarsLarge().then(data => this.cars = data);
}
}
</template>
</CodeHighlight>
<h3>Layouts</h3>
<p>DataView has two layout modes; "list" and "grid" where a separate template is used to render an item in each mode. In list mode name of the template is "listItem" whereas
in grid mode it is "gridItem".</p>
<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas
in grid mode it is "grid".</p>
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
<CodeHighlight>
<template v-pre>
&lt;template #listItem="slotProps" &gt;
&lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
@ -51,7 +53,7 @@ mounted() {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #gridItem="slotProps"&gt;
&lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
@ -65,9 +67,10 @@ mounted() {
</CodeHighlight>
<h3>Sections</h3>
<p>Header and Footer are the two sections that are capable of displaying custom content.</p>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<CodeHighlight>
&lt;template #header&gt;List of Cars&lt;/template&gt;
&lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt;
</CodeHighlight>
<h3>DataViewLayoutOptions</h3>
@ -75,19 +78,26 @@ mounted() {
to display a buttonset to choose the layout mode in DataView. Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element
you can create your own that updates the layout property of the DataView.
</p>
<CodeHighlight>
&lt;template #header&gt;
&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</CodeHighlight>
<h3>Paginator</h3>
<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.</p>
of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt;
@ -97,13 +107,10 @@ mounted() {
&lt;template #paginatorRight&gt;
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;template #header&gt;
List of Cars
&lt;/template&gt;
&lt;template #listItem="slotProps" &gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #gridItem="slotProps"&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
@ -111,73 +118,75 @@ mounted() {
</CodeHighlight>
<h3>Sorting</h3>
<p>sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
<p><i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #paginatorLeft&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt;
&lt;/template&gt;
&lt;template #paginatorRight&gt;
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;template #header&gt;
List of Cars
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt;
&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&gt;
&lt;DataViewLayoutOptions v-model="layout" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #listItem="slotProps" &gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #gridItem="slotProps"&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</CodeHighlight>
<h3>Properties of DataViewLayoutOptions</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>layout</td>
<td>string</td>
<td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td>
</tr>
</tbody>
</table>
</div>
<CodeHighlight lang="js">
<template v-pre>
export default {
data() {
return {
cars: null,
layout: 'list',
sortKey: null,
sortOrder: null,
sortField: null,
sortOptions: [
{label: 'Newest First', value: '!year'},
{label: 'Oldest First', value: 'year'},
{label: 'Brand', value: 'brand'}
]
}
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
this.carService.getCarsLarge().then(data => this.cars = data);
},
methods: {
onSortChange(event){
const value = event.value.value;
const sortValue = event.value;
<h3>Events of DataViewLayoutOptions</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: browser event <br/>
event.value = layout mode e.g. "list" or "grid"
</td>
<td>Callback to invoke when layout mode is changed.</td>
</tr>
</tbody>
</table>
</div>
if (value.indexOf('!') === 0) {
this.sortOrder = -1;
this.sortField = value.substring(1, value.length);
this.sortKey = sortValue;
}
else {
this.sortOrder = 1;
this.sortField = value;
this.sortKey = sortValue;
}
}
}
}
</template>
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
@ -206,7 +215,7 @@ mounted() {
<tr>
<td>rows</td>
<td>number</td>
<td>null</td>
<td>0</td>
<td>Number of rows to display per page.</td>
</tr>
<tr>
@ -291,6 +300,30 @@ mounted() {
</table>
</div>
<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>page</td>
<td>event.page: New page number <br/>
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.pageCount: Total number of pages
</td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</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">
@ -340,8 +373,7 @@ mounted() {
</a>
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;DataView&lt;/h1&gt;
@ -362,7 +394,7 @@ mounted() {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #listItem="slotProps" &gt;
&lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
@ -385,7 +417,7 @@ mounted() {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #gridItem="slotProps"&gt;
&lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
@ -397,13 +429,11 @@ mounted() {
&lt;/template&gt;
&lt;/DataView&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
<script>
import CarService from '../../service/CarService';
export default {
@ -446,7 +476,6 @@ export default {
}
}
}
</script>
</CodeHighlight>
<CodeHighlight lang="css">