@hennge/vue3-pagination
A Vue 3 component for pagination.
172,111
48
| Install | |
|---|---|
npm install @hennge/vue3-pagination |
|
| Latest Version: | 1.0.17 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | Mar 31, 2021 |
| Links: | GitHub · npm |
Maintainer: npm-maintainer
Vue 3 Pagination
A Vue 3 component for pagination.
Table of Contents
Demo
Installation
Package is available on NPM: https://www.npmjs.com/package/vue3-pagination
// with npm
npm install @hennge/vue3-pagination
// with yarn
yarn add @hennge/vue3-pagination
The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.
Getting Started
Import component
import VPagination from "@hennge/vue3-pagination";
import "@hennge/vue3-pagination/dist/vue3-pagination.css";
export default {
...
components: {
VPagination
}
...
}
How to use
<template>
<v-pagination
v-model="page"
:pages="10"
:range-size="1"
active-color="#DCEDFF"
@update:modelValue="updateHandler"
/>
</template>
Props and attributes
Main interaction with the pagination is done via v-model with Number as expected type of the value passed.
| ID | Type | Default | Description |
|---|---|---|---|
pages |
Number |
Total number of pages | |
rangeSize |
Number |
1 | Number of page around the current page |
activeColor |
String |
#DCEDFF | Background color of the current page |
hideFirstButton |
Boolean |
false | Hide the button to go to the first page |
hideLastButton |
Boolean |
false | Hide the button to go to the last page |
Events
| ID | Output | Description |
|---|---|---|
update:modelValue |
Number |
The current page has been updated |
License
Copyright © 2020 - Present, Julian Springaux
Contact
Related Packages
@2alheure/vue-pagination
A simple Vue.js component that helps to print and handle a pagination
402
0
Version History
| Version | Released | License |
|---|---|---|
| 1.0.17 | MIT | |
| 1.0.16 | MIT |