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>
Usage
Full example
Origin UI Examples
These are some examples that I found today over here Origin UI ❤️. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
Apart
Info Center
Info Start & End
Bootstrap
Table
Rows per page
1 of 10