@maqe-vue/pagination

The Vue2 component for pagination

Installation

NPM

Install the npm package.

npm install @maqe-vue/pagination --save

Register the component

Global

import Pagination from '@maqe-vue/pagination'

Vue.component('pagination', Pagination)

Local

<script>
import Pagination from '@maqe-vue/pagination'

export default {
	components: {
		Pagination
	}
}
</script>

Included the style

Add the default style of component

import '@maqe-vue/pagination/dist/@maqe-vue/pagination.css'

Usage

Basic

<pagination
	:totalPage="10"
	:value="1"
	@onPageChange="handleChange"
/>

Custom Previous and Next button

You can use slot for override original button

Slot names

Name	Description
prev	Previous button default: "Prev"
next	Next button default: "Next"

<pagination
	:totalPage="10"
	:value="1"
	@onPageChange="handleChange"
>
	<template v-slot:prev>
		<font-awesome-icon :icon="['far', 'angle-left']" />
	</template>
	<template v-slot:next>
		<font-awesome-icon :icon="['far', 'angle-right']" />
	</template>
</pagination>

Custom Options

You can use property options to custom pagination type that depend on screen width

<pagination
	:totalPage="10"
	:value="1"
	:options="{
		type: 'full',
		breakpoints: {
			// large to small: that override smaller
			1024: { // screen width is lower 1024. so, this is for tablet
				type: 'compact'
			},
			580: { // screen width is lower 480. so, this is for mobile
				type: 'simple'
			}
		}
	}"
	@onPageChange="handleChange"
/>

Custom style

You can add container class name as containerClass prop

<template>
	<pagination
		:totalPage="10"
		:value="1"
		containerClass="custom-pagination"
		@onPageChange="handleChange"
	>
		<template v-slot:prev>
			<font-awesome-icon :icon="['far', 'angle-left']" />
		</template>
		<template v-slot:next>
			<font-awesome-icon :icon="['far', 'angle-right']" />
		</template>
	</pagination>
</template>

<script>
export default {
	methods: {
		handleChange(page) => {
			console.log(page)
		}
	}
}
</script>

<style lang="scss">
.custom-pagination {
	--vmq-pagination-color: #ddd;
}
</style>

Props and Computed

Props

Name	Type	Description
totalPage	Number	Total count of pages. default: 1
value	Number	The current page. default: 1
containerClass	String	Add container class name
options	Object
options.type	String	full compact simple default: full
options.breakpoints	Object	set options.type depend on screen width

Computed

Name
firstPage
lastPage
isFirstPage
isLastPage
currentPage