Pagination
Displays data in paged format and provides navigation between pages.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add pagination
Anatomy
<template>
<UiPagination>
<UiPaginationList v-slot="{ items }">
<UiPaginationFirst asChild :icon="firstIcon" />
<UiPaginationPrev asChild :icon="prevIcon" />
<template v-for="(page, index) in items" :key="index">
<UiPaginationItem asChild v-if="page.type === 'page'" v-bind="page" />
<UiPaginationEllipsis
asChild
v-else-if="page.type === 'ellipsis'"
v-bind="page"
:icon="ellipsisIcon"
/>
</template>
<UiPaginationNext asChild :icon="nextIcon" />
<UiPaginationLast asChild :icon="lastIcon" />
</UiPaginationList>
</UiPagination>
</template>