Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
189 lines (160 sloc) 4.49 KB

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>
  <pagination v-model="currentPage" :total-page="totalPage"/>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-example.vue -->

Sizing

Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes.

<template>
  <section>
    <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"/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-sizing.vue -->

Alignment

By default the pagination component is left aligned. Change the alignment to center or right by setting align to the appropriate value.

<template>
  <section>
    <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"/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-alignment.vue -->

Direction links

By default direction-links are enabled, which allows users to nav to previous or next page.

<template>
  <section>
    <pagination v-model="currentPage" :total-page="totalPage"/>
    <pagination v-model="currentPage" :total-page="totalPage" :direction-links="false"/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-direction-links.vue -->

Boundary links

Add boundary-links to allow fast nav to the first or last page.

<template>
  <pagination v-model="currentPage" :total-page="totalPage" boundary-links/>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-boundary-links.vue -->

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>
  <section>
    <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"/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 10,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-chunks.vue -->

Disabled

<template>
  <pagination v-model="currentPage" :total-page="totalPage" disabled/>
</template>
<script>
  export default {
    data () {
      return {
        totalPage: 18,
        currentPage: 1
      }
    }
  }
</script> 
<!-- pagination-disabled.vue -->

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.