Package Exports

vue-plain-pagination

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-plain-pagination) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-plain-pagination

A simple pagination component for Vue.

Online demo: JSFiddle (used styles from Bootstrap 4)

Dependencies

Vue.js 2 - progressive JavaScript framework

Installation

via Yarn

yarn add vue-plain-pagination

via NPM

npm install vue-plain-pagination

via CDN

<script src="//unpkg.com/vue-plain-pagination@0.2.1"></script>

Usage

Basic

after Yarn/NPM installation

<template>
  <div>
    <p>Current page: {{ currentPage }}</p>
    <v-pagination v-model="currentPage" :page-count="30"></v-pagination>
  </div>
</template>

<script>
import vPagination from 'vue-plain-pagination'

export default {
  components: { vPagination },
  data() {
    return {
      currentPage: 1
    }
  }
}
</script>

via CDN

<!doctype html>
<html lang="en">
<head>
    <title>vue-plain-pagination</title>
</head>
<body>
<div id="app">
    <p>page: {{ currentPage }}</p>
    <v-pagination v-model="currentPage" :page-count="total"></v-pagination>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-plain-pagination"></script>
<script>
  Vue.component('v-pagination', window['vue-plain-pagination'])

  new Vue({
    el: '#app',
    data: {
      currentPage: 5,
      total: 9,
    },
  })
</script>
</body>
</html>

Customization

Using classes and labels you can change default CSS class names of every HTML tag of pagination and anchor from first/prev/next/last buttons.

<template>
  <div>
    <p>Current page: {{ currentPage }}</p>
    <v-pagination v-model="currentPage"
                  :page-count="totalPages"
                  :classes="bootstrapPaginationClasses"
                  :labels="paginationAnchorTexts"></v-pagination>
  </div>
</template>

<script>
import vPagination from 'vue-plain-pagination'

export default {
  components: { vPagination },
  data() {
    return {
      currentPage: 1,
      totalPages: 30,
      bootstrapPaginationClasses: {
        ul: 'pagination',
        li: 'page-item',
        liActive: 'active',
        liDisable: 'disabled',
        button: 'page-link'  
      },
      paginationAnchorTexts: {
        first: 'First',
        prev: 'Previous',
        next: 'Next',
        last: 'Last'
      }
    }
  }
}
</script>

demo: JSFiddle

Properties

name	type	required
`v-model`	Number	yes	Current page.
`page-count`	Number	yes	Number of pages.
`classes`	Object	no	Class names of used HTML tag.
`labels`	Object	no	HTML/text of prev/next button.

Default value of classes:

{
   ul: 'pagination',
   li: 'pagination-item',
   liActive: 'pagination-item--active',
   liDisable: 'pagination-item--disable',
   button: 'pagination-link',
   buttonActive: 'pagination-link--active',
   buttonDisable: 'pagination-link--disable'
}

Default value of labels:

{
   first: '&laquo;',
   prev: '&lsaquo;',
   next: '&rsaquo;',
   last: '&raquo;'
}

Contributing

Files structure is generated by Vue CLI 3 (babel, eslint).

via Yarn

# install dependencies
yarn install

# compiles and hot-reloads for development
yarn run serve

# compiles bundle for production
yarn run build-lib

# lints and fixes files
yarn run lint

via NPM

# install dependencies
npm install

# compiles and hot-reloads for development
npm run serve

# compiles bundle for production
npm run build-lib

# lints and fixes files
npm run lint

License

Code released under the MIT license.