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
1 of 10