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" :value="1" />
Size
Use the size
prop to change the size of the buttons.
<UPagination size="sm" :value="1" :total="100" show-last show-first />
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' }" :value="1" :total="100"/>
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' }" :value="1" :total="100"/>
First / Last New
Use the first-button
and last-button
props to customize the first and last buttons of the Pagination.
<UPagination :first-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'First', color: 'gray' }" :last-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Last', color: 'gray' }" :value="1" :total="100" show-first show-last/>
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>
first
/ last
New
Use the #first
and #last
slots to set the content of the first and last 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 #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>
Props
7
config.default.size
undefined
"\u2026"
10
config.default.activeButton as Button
config.default.inactiveButton as Button
config.default.firstButton as Button
config.default.lastButton as Button
config.default.prevButton as Button
config.default.nextButton as Button
false
false
Config
{ "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" }, "firstButton": { "color": "white", "class": "rtl:[&_span:first-child]:rotate-180", "icon": "i-heroicons-chevron-double-left-20-solid" }, "lastButton": { "color": "white", "class": "rtl:[&_span:last-child]:rotate-180", "icon": "i-heroicons-chevron-double-right-20-solid" }, "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 " } }}