HopeKitAppearance
Pagination
Basic Usage
1
2
3
4
5
...
10
1
2
3
4
5
6
7
8
9
10
...
200
<template>
<div class="">
<HcPagination
v-model:currentPage="currentPage1"
:total-pages="10"
/>
<HcPagination
v-model:currentPage="currentPage2"
:total-pages="200"
:items-per-section="10"
class="mt-8"
/>
</div>
</template>
<script lang="ts" setup>
import { HcPagination } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const currentPage1 = ref(1);
const currentPage2 = ref(1);
</script>
Props
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| totalPages | Number | Number | Total amount of pages | undefined |
| currentPage | Number | Number | current page | undefined |
| itemsPerSection | Number | Number | max amount of visible pages in each section | undefined |
Events
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| update:current-page | Function | page - number | triggers when the Pagination page changed |