jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pagination component improvements (#198)

Browse Source 
* Adds page change event (#189)

Adds first and last pagination items

Co-authored-by: gassio <gassiogi@gmail.com>

* feat: Pagination component refactoring

---------

Co-authored-by: gassio <gassioglou@gmail.com>
Co-authored-by: gassio <gassiogi@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-09-21 13:38:23 +03:00
committed by GitHub
parent 7652d98219
commit 1370f1c776
9 changed files with 314 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/components/pagination/examples/PaginationWithIconsExample.vue
View File

@@ -1,6 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
<div class="vp-raw flex flex-col items-center">
<Pagination v-model="currentPage" :total-pages="100" :show-labels="false" class="mb-2">
<template #prev-icon>
<span class="sr-only">Previous</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</template>
<template #next-icon>
<span class="sr-only">Next</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</template>
</Pagination>
<Pagination v-model="currentPage" :total-pages="100" :show-labels="false" large>
<template #prev-icon>
<span class="sr-only">Previous</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</template>
<template #next-icon>
<span class="sr-only">Next</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</template>
</Pagination>
</div>
</template>
<script lang="ts" setup>