Dataview doc added
Merve Özçifçi
parent
8b32e2c99d
commit
70fef9b78c
|
|
@ -7,79 +7,177 @@
|
||||||
import DataView from 'primevue/dataview';
|
import DataView from 'primevue/dataview';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<!--<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p><i>first</i>, <i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
|
<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>
|
<CodeHighlight lang="js">
|
||||||
<Paginator :first.sync="first" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
<template v-pre>
|
||||||
</CodeHighlight>
|
data() {
|
||||||
|
return {
|
||||||
|
cars: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
carService: null,
|
||||||
|
created() {
|
||||||
|
this.carService = new CarService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||||
|
}
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Start Offset</h3>
|
<h3>Layouts</h3>
|
||||||
<p><i>first</i> property defines the index of the first item displayed by the paginator and should be used with the sync operator.
|
<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
|
||||||
This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.</p>
|
in grid mode it is "gridItem".</p>
|
||||||
<CodeHighlight>
|
<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>
|
||||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
<CodeHighlight>
|
||||||
</CodeHighlight>
|
<template v-pre>
|
||||||
|
<template #listItem="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">
|
||||||
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-8 car-data">
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||||
|
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||||
|
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Rows Per Page</h3>
|
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||||
<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.
|
<Button icon="pi pi-search"></Button>
|
||||||
As <i>rows</i> also change when the dropdown changes, use the sync operator for two-way binding.</p>
|
</div>
|
||||||
<CodeHighlight>
|
</div>
|
||||||
<Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
</div>
|
||||||
</CodeHighlight>
|
</template>
|
||||||
|
<template #gridItem="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"/>
|
||||||
|
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||||
|
<hr class="ui-widget-content" style="border-top: 0" />
|
||||||
|
<Button icon="pi pi-search"></Button>
|
||||||
|
</Panel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Template</h3>
|
<h3>Sections</h3>
|
||||||
<p>Paginator elements can be customized using the template property using the predefined keys, default value is
|
<p>Header and Footer are the two sections that are capable of displaying custom content.</p>
|
||||||
"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
|
<CodeHighlight>
|
||||||
can be placed inside a paginator in any order.</p>
|
<template #header>List of Cars</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<ul>
|
<h3>DataViewLayoutOptions</h3>
|
||||||
<li>FirstPageLink</li>
|
<p>When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component
|
||||||
<li>PrevPageLink</li>
|
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
|
||||||
<li>PageLinks</li>
|
you can create your own that updates the layout property of the DataView.
|
||||||
<li>NextPageLink</li>
|
|
||||||
<li>LastPageLink</li>
|
|
||||||
<li>RowsPerPageDropdown</li>
|
|
||||||
<li>CurrentPageReport</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<CodeHighlight>
|
|
||||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
|
|
||||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
|
|
||||||
</CodeHighlight>
|
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
|
||||||
<p>There are two slots available named "left" and "right" to add custom content to these locations. Both slots get
|
|
||||||
a state object as a slot property to provide the current page, first index and the rows.
|
|
||||||
</p>
|
</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template #header>
|
||||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
<template #left="slotProps">
|
</template>
|
||||||
Page: {{slotProps.state.page}}
|
|
||||||
First: {{slotProps.state.first}}
|
<template #footer>
|
||||||
Rows: {{slotProps.state.rows}}
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
|
</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>
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
||||||
|
<template #paginatorLeft>
|
||||||
|
<Button type="button" icon="pi pi-refresh"/>
|
||||||
</template>
|
</template>
|
||||||
<template #right>
|
<template #paginatorRight>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
</Paginator>
|
<template #header>
|
||||||
</template>
|
List of Cars
|
||||||
</CodeHighlight>
|
</template>
|
||||||
|
<template #listItem="slotProps" >
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
</template>
|
||||||
|
<template #gridItem="slotProps">
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
</template>
|
||||||
|
</DataView>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Page Change Event</h3>
|
<h3>Sorting</h3>
|
||||||
<p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
|
<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.
|
||||||
<CodeHighlight>
|
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
|
||||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"></Paginator>
|
<CodeHighlight>
|
||||||
</CodeHighlight>
|
<template v-pre>
|
||||||
|
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
|
<template #paginatorLeft>
|
||||||
|
<Button type="button" icon="pi pi-refresh"/>
|
||||||
|
</template>
|
||||||
|
<template #paginatorRight>
|
||||||
|
<Button type="button" icon="pi pi-search" />
|
||||||
|
</template>
|
||||||
|
<template #header>
|
||||||
|
List of Cars
|
||||||
|
</template>
|
||||||
|
<template #listItem="slotProps" >
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
</template>
|
||||||
|
<template #gridItem="slotProps">
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
</template>
|
||||||
|
</DataView>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<h3>Properties of DataViewLayoutOptions</h3>
|
||||||
onPage(event) {
|
<div class="doc-tablewrapper">
|
||||||
//event.page: New page number
|
<table class="doc-table">
|
||||||
//event.first: Index of first record
|
<thead>
|
||||||
//event.rows: Number of rows to display in new page
|
<tr>
|
||||||
//event.pageCount: Total number of pages
|
<th>Name</th>
|
||||||
}
|
<th>Type</th>
|
||||||
</CodeHighlight>
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
@ -94,22 +192,58 @@ import DataView from 'primevue/dataview';
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>totalRecords</td>
|
<td>value</td>
|
||||||
<td>number</td>
|
<td>array</td>
|
||||||
<td>0</td>
|
<td>null</td>
|
||||||
<td>Number of total records.</td>
|
<td>An array of objects to display.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>layout</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>list</td>
|
||||||
|
<td>Layout of the items, valid values are "list" and "grid".</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>rows</td>
|
<td>rows</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>null</td>
|
||||||
<td>Data count to display per page.</td>
|
<td>Number of rows to display per page.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>first</td>
|
<td>first</td>
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>Zero-relative number of the first row to be displayed.</td>
|
<td>Index of the first record to render.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>totalRecords</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Number of total records, defaults to length of value when not defined.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>paginator</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>When specified as true, enables the pagination.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>paginatorPosition</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>bottom</td>
|
||||||
|
<td>Position of the paginator, options are "top","bottom" or "both".</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>alwaysShowPaginator</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Whether to show it even there is only one page.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>paginatorTemplate</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
|
||||||
|
<td>Template of the paginator.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>pageLinkSize</td>
|
<td>pageLinkSize</td>
|
||||||
|
|
@ -123,41 +257,35 @@ import DataView from 'primevue/dataview';
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Array of integer values to display inside rows per page dropdown.</td>
|
<td>Array of integer values to display inside rows per page dropdown.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td>template</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
|
|
||||||
<td>Template of the paginator.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>currentPageReportTemplate</td>
|
<td>currentPageReportTemplate</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>({currentPage} of {totalPages})</td>
|
<td>({currentPage} of {totalPages})</td>
|
||||||
<td>Template of the current page report element.</td>
|
<td>Template of the current page report element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Events</h3>
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<td>emptyMessage</td>
|
||||||
<th>Parameters</th>
|
<td>string</td>
|
||||||
<th>Description</th>
|
<td>No records found.</td>
|
||||||
|
<td>Text to display when there is no data.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>page-change</td>
|
<td>sortField</td>
|
||||||
<td>event.page: New page number <br/>
|
<td>string</td>
|
||||||
event.first: Index of first record <br/>
|
<td>null</td>
|
||||||
event.rows: Number of rows to display in new page <br/>
|
<td>Name of the field to sort data by default.</td>
|
||||||
event.pageCount: Total number of pages
|
</tr>
|
||||||
</td>
|
<tr>
|
||||||
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
|
<td>sortOrder</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Order to sort the data by default.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lazy</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>Defines if data is loaded and interacted with in lazy manner.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -175,36 +303,28 @@ import DataView from 'primevue/dataview';
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator</td>
|
<td>p-dataview</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator-first</td>
|
<td>p-dataview-list</td>
|
||||||
<td>First page element.</td>
|
<td>Container element in list layout.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator-prev</td>
|
<td>p-dataview-grid</td>
|
||||||
<td>Previous page element.</td>
|
<td>Container element in grid layout.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator-pages</td>
|
<td>p-dataview-header</td>
|
||||||
<td>Container of page links.</td>
|
<td>Header section.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator-page</td>
|
<td>p-dataview-footer</td>
|
||||||
<td>A page link.</td>
|
<td>Footer section.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-paginator-next</td>
|
<td>p-dataview-content</td>
|
||||||
<td>Next pge element.</td>
|
<td>Container of items.</td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>p-paginator-last</td>
|
|
||||||
<td>Last page element.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>p-paginator-rpp-options</td>
|
|
||||||
<td>Rows per page dropdown.</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -215,82 +335,122 @@ import DataView from 'primevue/dataview';
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<template v-pre>
|
||||||
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Paginator</h1>
|
<h1>DataView</h1>
|
||||||
<p>Paginator is a generic component to display content in paged format.</p>
|
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
|
<template #header>
|
||||||
<h3>Custom Template</h3>
|
<div class="p-grid">
|
||||||
<Paginator :first.sync="first2" :rows="1" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
<div class="p-col-6" style="text-align: left">
|
||||||
<template #left>
|
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
</div>
|
||||||
</template>
|
<div class="p-col-6" style="text-align: right">
|
||||||
<template #right>
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
<Button type="button" icon="pi pi-search" />
|
|
||||||
</template>
|
|
||||||
</Paginator>
|
|
||||||
|
|
||||||
<div class="image-gallery">
|
|
||||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #listItem="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">
|
||||||
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-8 car-data">
|
||||||
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
|
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||||
|
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||||
|
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<PaginatorDoc />
|
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||||
|
<Button icon="pi pi-search"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
<template #gridItem="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"/>
|
||||||
|
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||||
|
<hr class="ui-widget-content" style="border-top: 0" />
|
||||||
|
<Button icon="pi pi-search"></Button>
|
||||||
|
</Panel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</DataView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
import PaginatorDoc from './PaginatorDoc';
|
import CarService from '../../service/CarService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
first: 0,
|
cars: null,
|
||||||
rows: 10,
|
layout: 'list',
|
||||||
totalRecords: 50,
|
sortKey: null,
|
||||||
first2: 0,
|
sortOrder: null,
|
||||||
totalRecords2: 12,
|
sortField: null,
|
||||||
image: 'nature1'
|
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: {
|
methods: {
|
||||||
onPageChangeCustom(event) {
|
changeMode(event) {
|
||||||
this.image = 'nature' + (event.page + 1);
|
this.layout = event.value;
|
||||||
},
|
},
|
||||||
reset() {
|
onSortChange(event){
|
||||||
this.first2 = 0;
|
const value = event.value.value;
|
||||||
this.image = 'nature1';
|
const sortValue = event.value;
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
'PaginatorDoc': PaginatorDoc
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</CodeHighlight>
|
|
||||||
|
|
||||||
<CodeHighlight lang="css">
|
if (value.indexOf('!') === 0) {
|
||||||
.p-button.p-button-icon-only {
|
this.sortOrder = -1;
|
||||||
border-radius: 0;
|
this.sortField = value.substring(1, value.length);
|
||||||
|
this.sortKey = sortValue;
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
this.sortOrder = 1;
|
||||||
|
this.sortField = value;
|
||||||
|
this.sortKey = sortValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
.image-gallery {
|
<CodeHighlight lang="css">
|
||||||
text-align: center;
|
.p-dropdown {
|
||||||
padding: 1em;
|
width: 12em;
|
||||||
}
|
}
|
||||||
</CodeHighlight>-->
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue