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

Update HeadlessDoc.vue

pull/6687/head
Cagatay Civici 2024-10-30 14:36:45 +03:00
parent 12b681ab66
commit 0ad8b3e762
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/showcase/doc/paginator/HeadlessDoc.vue
View File

@ -18,13 +18,13 @@
<div class="card"> <div class="card">
<Paginator :rows="10" :totalRecords="120"> <Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }"> <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between"> <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" /> <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
<div class="text-primary-contrast font-medium"> <div class="text-color font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span> <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span> <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
</div> </div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" /> <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
</div> </div>
</template> </template>
</Paginator> </Paginator>
@ -40,14 +40,16 @@ export default {
basic: ` basic: `
<Paginator :rows="10" :totalRecords="120"> <Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }"> <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between"> <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" /> <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
<div class="text-primary-contrast font-medium"> <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span> <div class="text-color font-medium">
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span> <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
</div>
<Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
</div> </div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" /> </template>
</div>
</template> </template>
</Paginator> </Paginator>
`, `,
@ -56,13 +58,13 @@ export default {
<div class="card"> <div class="card">
<Paginator :rows="10" :totalRecords="120"> <Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }"> <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between"> <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" /> <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
<div class="text-primary-contrast font-medium"> <div class="text-color font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span> <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span> <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
</div> </div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" /> <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
</div> </div>
</template> </template>
</Paginator> </Paginator>
@ -77,13 +79,13 @@ export default {
<div class="card"> <div class="card">
<Paginator :rows="10" :totalRecords="120"> <Paginator :rows="10" :totalRecords="120">
<template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }"> <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
<div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between"> <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
<Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" /> <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
<div class="text-primary-contrast font-medium"> <div class="text-color font-medium">
<span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span> <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
<span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span> <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
</div> </div>
<Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" /> <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
</div> </div>
</template> </template>
</Paginator> </Paginator>