navigation
Pagination
Add a pagination to handle pages.
Usage
Use a v-model to get a reactive page alongside a total which represents the total of items. You can also use the page-count prop to define the number of items per page which defaults to 10.
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :page-count="5" :total="items.length" />
</template>Max
Use the max prop to set a maximum of displayed pages. Defaults to 7, being the minimum.
<UPagination :max="5" :page-count="5" :total="100" />Size
Use the size prop to change the size of the buttons.
<UPagination size="sm" />Active / Inactive
Use the active-button and inactive-button props to customize the active and inactive buttons of the Pagination.
<UPagination :active-button="{ variant: 'outline' }" :inactive-button="{ color: 'gray' }" />Prev / Next
Use the prev-button and next-button props to customize the prev and next buttons of the Pagination.
<UPagination :prev-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'Prev', color: 'gray' }" :next-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Next', color: 'gray' }" />Slots
prev / next
Use the #prev and #next slots to set the content of the previous and next buttons.
<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 #prev="{ onClick }">
<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" />
</UTooltip>
</template>
<template #next="{ onClick }">
<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" />
</UTooltip>
</template>
</UPagination>
</template>Props
config.default.size
undefined
7
10
config.default.activeButton as Button
config.default.inactiveButton as Button
config.default.prevButton as Button
config.default.nextButton as Button
"\u2026"
Preset
{
"wrapper": "flex items-center -space-x-px",
"base": "",
"rounded": "first:rounded-s-md last:rounded-e-md",
"default": {
"size": "sm",
"activeButton": {
"color": "primary"
},
"inactiveButton": {
"color": "white"
},
"prevButton": {
"color": "white",
"class": "rtl:[&_span:first-child]:rotate-180",
"icon": "i-heroicons-chevron-left-20-solid"
},
"nextButton": {
"color": "white",
"class": "rtl:[&_span:last-child]:rotate-180",
"icon": "i-heroicons-chevron-right-20-solid "
}
}
}