# Pagination
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.
<template>
<div class="uiv">
<pagination v-model="currentPage" :total-page="totalPage"/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 1
}
}
}
</script>
# Sizing
Fancy larger or smaller pagination? Add size="lg"
or size="sm"
for additional sizes.
<template>
<div class="uiv">
<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"/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 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.
<template>
<div class="uiv">
<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"/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 1
}
}
}
</script>
# Direction links
By default direction-links
are enabled, which allows users to nav to previous or next page.
<template>
<div class="uiv">
<pagination v-model="currentPage" :total-page="totalPage"/>
<pagination v-model="currentPage" :total-page="totalPage" :direction-links="false"/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 1
}
}
}
</script>
# Boundary links
Add boundary-links
to allow fast nav to the first or last page.
<template>
<div class="uiv">
<pagination v-model="currentPage" :total-page="totalPage" boundary-links/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 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
.
<template>
<div class="uiv">
<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"/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 10,
currentPage: 1
}
}
}
</script>
# Disabled
<template>
<div class="uiv">
<pagination v-model="currentPage" :total-page="totalPage" disabled/>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 18,
currentPage: 1
}
}
}
</script>
# API Reference
# Pagination (opens new window)
# 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. |