arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Pagination): add first and last page buttons (#842)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Max Steinwand <msteinwand@kues.de>
This commit is contained in:
max
2023-10-25 19:23:51 +02:00
committed by GitHub
parent 9c05b3a317
commit c5ce997ba9
4 changed files with 134 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/components/content/examples/PaginationExampleFirstLastSlots.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #first="{ onClick }">
<UTooltip text="First page">
<UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
</UTooltip>
</template>
<template #last="{ onClick }">
<UTooltip text="Last page">
<UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>
</template>