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)} | |

Customize configuration

See Configuration Reference.

License

MIT