uiv

# 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>

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>

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.

← ProgressBar 进度条 →