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

Finished paginator docs and added image gallery demo

pull/12/head
cagataycivici 2019-03-21 11:04:44 +03:00
parent b7f9f05649
commit 71c9427dbc
2 changed files with 64 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/paginator/PaginatorDemo.vue
View File

@ -12,14 +12,18 @@
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
<h3>Custom Template</h3>
<Paginator :first="first2" :rows="rows2" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
<Paginator :first.sync="first2" :rows="1" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
<template #left>
<Button type="button" icon="pi pi-refresh" />
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
</template>
<template #right>
<Button type="button" icon="pi pi-search" />
</template>
</Paginator>
<div class="image-gallery">
<img :src="'/demo/images/nature/' + image + '.jpg'" />
</div>
</div>
<PaginatorDoc />
@ -36,14 +40,17 @@ export default {
rows: 10,
totalRecords: 50,
first2: 0,
rows2: 1,
totalRecords2: 12
totalRecords2: 12,
image: 'nature1'
}
},
methods: {
onPageChangeCustom(event) {
this.first2 = event.first;
this.rows2 = event.rows;
this.image = 'nature' + (event.page + 1);
},
reset() {
this.first2 = 0;
this.image = 'nature1';
}
},
components: {
@ -52,8 +59,13 @@ export default {
}
</script>
<style lang="scss">
<style scoped>
.p-button.p-button-icon-only {
border-radius: 0;
}
.image-gallery {
text-align: center;
padding: 1em;
}
</style>

67
src/views/paginator/PaginatorDoc.vue
View File

@ -77,7 +77,6 @@ onPage(event) {
//event.page: New page number
//event.first: Index of first record
//event.rows: Number of rows to display in new page
//event.page: Index of the new page
//event.pageCount: Total number of pages
}
</CodeHighlight>
@ -156,7 +155,6 @@ onPage(event) {
<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.page: Index of the 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>
@ -222,51 +220,76 @@ onPage(event) {
</a>
<CodeHighlight>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Paginator&lt;/h1&gt;
&lt;p&gt;Paginator is a generic component to display content in paged format.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Paginator&lt;/h1&gt;
&lt;p&gt;Paginator is a generic component to display content in paged format.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;first&quot;&gt;Default&lt;/h3&gt;
&lt;Paginator :first.sync=&quot;first&quot; :rows.sync=&quot;rows&quot; :totalRecords=&quot;totalRecords&quot; :rowsPerPageOptions=&quot;[10,20,30]&quot;&gt;&lt;/Paginator&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;first&quot;&gt;Default&lt;/h3&gt;
&lt;Paginator :first.sync=&quot;first&quot; :rows.sync=&quot;rows&quot; :totalRecords=&quot;totalRecords&quot; :rowsPerPageOptions=&quot;[10,20,30]&quot;&gt;&lt;/Paginator&gt;
&lt;h3&gt;Custom Template&lt;/h3&gt;
&lt;Paginator :first=&quot;first2&quot; :rows=&quot;rows2&quot; :totalRecords=&quot;totalRecords2&quot; @page-change=&quot;onPageChangeCustom($event)&quot; template=&quot;FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink&quot;&gt;
&lt;h3&gt;Custom Template&lt;/h3&gt;
&lt;Paginator :first.sync=&quot;first2&quot; :rows=&quot;1&quot; :totalRecords=&quot;totalRecords2&quot; @page-change=&quot;onPageChangeCustom($event)&quot; template=&quot;FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink&quot;&gt;
&lt;template #left&gt;
&lt;Button type=&quot;button&quot; icon=&quot;pi pi-refresh&quot; /&gt;
&lt;Button type=&quot;button&quot; icon=&quot;pi pi-refresh&quot; @click=&quot;reset()&quot;/&gt;
&lt;/template&gt;
&lt;template #right&gt;
&lt;Button type=&quot;button&quot; icon=&quot;pi pi-search&quot; /&gt;
&lt;/template&gt;
&lt;/Paginator&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;image-gallery&quot;&gt;
&lt;img :src=&quot;&#39;/demo/images/nature/&#39; + image + &#39;.jpg&#39;&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;PaginatorDoc /&gt;
&lt;/div&gt;
&lt;/template&gt;
</CodeHighlight>
<CodeHighlight lang="javascript">
import PaginatorDoc from './PaginatorDoc';
export default {
data() {
return {
first: 0,
first: 0,
rows: 10,
totalRecords: 50,
first2: 0,
rows2: 1,
totalRecords2: 12
totalRecords2: 12,
image: 'nature1'
}
},
methods: {
onPageChangeCustom(event) {
this.first2 = event.first;
this.rows2 = event.rows;
this.image = 'nature' + (event.page + 1);
},
reset() {
this.first2 = 0;
this.image = 'nature1';
}
},
components: {
'PaginatorDoc': PaginatorDoc
}
}
</CodeHighlight>
<CodeHighlight lang="css">
.p-button.p-button-icon-only {
border-radius: 0;
}
.image-gallery {
text-align: center;
padding: 1em;
}
</CodeHighlight>
</TabPanel>
</TabView>