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): improve slot props (#2522)

Browse Source
This commit is contained in:
offich
2024-11-06 00:06:49 +09:00
committed by GitHub
parent 6844f7bbd9
commit c71fdc8795
3 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/content/examples/PaginationExampleFirstLastSlots.vue
View File

@@ -5,15 +5,29 @@ const items = ref(Array(55))
<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 }">
<template #first="{ onClick, canGoFirst }">
<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" />
<UButton
icon="i-heroicons-arrow-uturn-left"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:first-child]:rotate-180 me-2"
:disabled="!canGoFirst"
@click="onClick"
/>
</UTooltip>
</template>
<template #last="{ onClick }">
<template #last="{ onClick, canGoLast }">
<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" />
<UButton
icon="i-heroicons-arrow-uturn-right-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:last-child]:rotate-180 ms-2"
:disabled="!canGoLast"
@click="onClick"
/>
</UTooltip>
</template>
</UPagination>

22
docs/components/content/examples/PaginationExamplePrevNextSlots.vue
View File

@@ -5,15 +5,29 @@ const items = ref(Array(55))
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #prev="{ onClick }">
<template #prev="{ onClick, canGoPrev }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-small-left-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:first-child]:rotate-180 me-2"
:disabled="!canGoPrev"
@click="onClick"
/>
</UTooltip>
</template>
<template #next="{ onClick }">
<template #next="{ onClick, canGoNext }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-small-right-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:last-child]:rotate-180 ms-2"
:disabled="!canGoNext"
@click="onClick"
/>
</UTooltip>
</template>
</UPagination>