@kurukururuu/ramen-adonis-pagination-component NPM

ramen-pagination-template

Vue.js Pagination Component for ordentid/ramen-adonis backend service.

Installation

npm install @kurukururuu/ramen-adonis-pagination-component

Usage

Import directly on your template

import PaginationComponent from '@kurukururuu/ramen-adonis-pagination-component'
export default {
	// ...
	components: {
		PaginationComponent
	}
	// ...
}

Use Nuxt.js plugin

// '/plugin/RamenPaginationTemplate.js'
import Vue from 'vue'
import PaginationComponent from '@kurukururuu/ramen-adonis-pagination-component';
Vue.use(PaginationComponent)

Example Usage

<!-- 'YourPage.vue' -->
<template>
	<PaginationComponent
		:data="list"
		text-nav
		@pagechanged="paginationChanged"
		/>
</template>

Options

Property Name	Type	Description	Default
data	Object	required; {data: Object, pagination: Object} from ramen-rest response	none
textNav	Boolean	navigation label. true for text-based, or false for symbol	false
firstText	String	custom label for first page	First Page
lastText	String	custom label for last page	Last Page
prevText	String	custom label for previous button	Previous
nextText	String	custom label for next button	Next
emptyText	String	custom text when data is empty	No Data Available

Listeners

Listener Name	Type	Description	Default
pageChanged	function	handler function after page is changed. No default handler. Object passed to the listener are {action:'previous / next / page-changed',page_destination:Number(page)}