Paginations

If you have too much data to display in one page, use pagination.

Basic usage

Set layout with different pagination elements you wish to display separated with a comma. Pagination elements are: prev (a button navigating to the previous page), next (a button navigating to the next page), pager (page list), jumper (a jump-to input), total (total item count), size (a select to determine page size) and ->(every element after this symbol will be pulled to the right).

• 1
• 2
• 3
• 4
• 5
• 6
• 100

Viwer Source

Code

```vue
<template>
  <molecula-Paginations
    :small="true"
    :background="true"
    :totalPage="50"
    :layout="'prev, pager, next'"
  />
</template>
```

:::

Buttons with background color

Set the background attribute and the buttons will have a background color.

• 1
• 2
• 3
• 4
• 5

Viwer Source

Code

```vue
<template>
  <molecula-Paginations
    :background="background"
  />
</template>
```

:::

Hide pagination when there is only one page

When there is only one page, hide the pagination by setting the hide-on-single-page attribute.

---

• 1
• 2
• 3
• 4
• 5

Viwer Source

Code

```vue
<template>
  <el-switch v-model="value" />
  <hr class="my-4" />
  <molecula-Paginations
    :hide="value"
    :background="false"
    :totalPage="50"
    :layout="'prev, pager, next'"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
</script>
```

:::

Events pagination

• 1
• 2
• 3
• 4
• 5
• 6
• 100

Viwer Source

Code

```vue
<template>
  <el-switch v-model="value" />
  <hr class="my-4" />
  <molecula-Paginations
    :hide="value"
    :background="false"
    :totalPage="50"
    :layout="'prev, pager, next'"
    :handleCurrentChange="change"
  />
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
const change = (val: number) => {
  ElMessage(`current page: ${val}`)
}
</script>
```

:::

Props

Name	Description	Type	Mandatory
layout	layout of Pagination, elements separated with a comma. string (consists of sizes, prev, pager, next, jumper, ->, total, slot)	String False

Attributes

Name	Description	Type	Default
small	whether to use small pagination	Boolean	False
hide	whether to hide when there's only one page	Boolean	False
disabled	whether Pagination is disabled	Boolean	False
background	whether the buttons have a background color	Boolean	True
totalPage	total item count	Number	50
currentPage	default initial value of current-page	Number	1
pageSize	Page Size	Number	10

Events

Name	Description	Type
handleSizeChange	triggers when page-size changes.	Function (value: number) => void
handleCurrentPage	triggers when current-page changes.	Function (value: number) => void

Example for Developer

Open in StackBlitz

Directory

└─ src                                            # Main source code.
    └── Components                                # Global components
            └── Atoms                             # Atom components
            └── Moleculas                         # Moleculas components
                └── Paginations                   # Molecule Paginations specific components.