vue-ads-pagination

vue-ads-pagination

Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a specific, the first, last, next or previous page.

It uses the handy tailwind css library for styling.

Demo

I've written a demo in JSFiddle

Installation

You can install the package via npm or yarn.

NPM

npm install vue-ads-pagination --save

YARN

yarn add vue-ads-pagination

Usage

You can use the vue-ads-pagination component by using the following code in your project.

<template>
  <div id="app">
    <vue-ads-pagination
        :page="3"
        :itemsPerPage="10"
        :maxVisiblePages="4"
        :totalItems="200"
        @page-change="pageChange"
    />
  </div>
</template>

<script>
import VueAdsPagination from 'vue-ads-pagination';

export default {
    name: 'app',
    components: {
        VueAdsPagination,
    },

    methods: {
        pageChange (page, range) {
            console.log(page, range);
        },
    },
};
</script>

Properties

property	required	default	description
page	false	0	A zero-based number to set the initial page
itemsPerPage	false	10	The max amount of items on one page
maxVisiblePages	false	5	The number of pages to be visible if their are too many pages
totalItems	true		The total amount of items

Methods

method	parameters	description
page-change	page, range	Emitted on creation, to know the initial state, and if another page is clicked. Two parameters are given: The zero-based page and the range. This is an object that contain the start and end keys. They contain a zero-based number to identify the items to be shown.

Testing

We use the jest framework for testing this pagination component. Run the following command to test it:

npm run test:unit

Changelog

Read the CHANGELOG file to check what has changed.

Issues

If you have any issues (bugs, features, ...) on the current project, add them here.

Contributing

Do you like to contribute to this project? Please, read the CONTRIBUTING file.

Social

• Follow me on

Donate

Want to make a donation? That would be highly appreciated!

Make a donation via PayPal.

Changelog

v1.0.1 - 14/08/2018

• Make the emitted events case insensitive.