uivPagination
Provide pagination links for your site or app with the multi-page pagination component.
Example
Simple pagination, great for apps and search results.
Use v-model (1-based) to indicate the current page.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" />
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
Sizing
Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" size="lg" />
<Pagination v-model="currentPage" :total-page="totalPage" />
<Pagination v-model="currentPage" :total-page="totalPage" size="sm" />
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
Alignment
By default the pagination component is left aligned. Change the alignment to center or right by setting align to the appropriate value.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" />
<Pagination v-model="currentPage" :total-page="totalPage" align="center" />
<Pagination v-model="currentPage" :total-page="totalPage" align="right" />
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
Direction links
By default direction-links are enabled, which allows users to nav to previous or next page.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" />
<Pagination
v-model="currentPage"
:total-page="totalPage"
:direction-links="false"
/>
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
Boundary links
Add boundary-links to allow fast nav to the first or last page.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" boundary-links />
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
Chunks
Use max-size to define the maximum chunk size of pagers (default is 5). And if you don't like chunk pagers, just simply set max-size to equal as total-page.
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" :max-size="3" />
<Pagination v-model="currentPage" :total-page="totalPage" />
<Pagination
v-model="currentPage"
:total-page="totalPage"
:max-size="totalPage"
/>
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(10);
const currentPage = ref(1);
</script>
Disabled
vue
<template>
<Pagination v-model="currentPage" :total-page="totalPage" disabled />
</template>
<script setup>
import { Pagination } from 'uiv';
import { ref } from 'vue';
const totalPage = ref(18);
const currentPage = ref(1);
</script>
API Reference
Pagination
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
v-model | Number | ✔ | The current page (1-based). | |
total-page | Number | ✔ | Total number of pages. | |
max-size | Number | 5 | Maximum number of pagers per chunk. | |
boundary-links | Boolean | false | Display First / Last buttons. | |
direction-links | Boolean | true | Display Previous / Next buttons. | |
size | String | Optional pagination sizes, support: sm / lg | ||
align | String | Optional pagination alignment, support: left / center / right | ||
disabled | Boolean | false | Disable the pagination component. |
Events
| Name | Params | Description |
|---|---|---|
change | index | Fire after page changed, with the index number changed to. |