Vue JS Ads Pagination Component Library

Vue Ads Pagination is a vuejs pagination component. On the left side, you find some information about the displayed items. On the right side, you can select a specific page, first, last, next or previous.

All components can be overridden by your own components, or you can add your own styles to the default components.

vue-js-ads-pagination

How to use it:

Installation:

NPM
npm install vue-ads-pagination --save

YARN
yarn add vue-ads-pagination

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

<template>
    <div id="app">
        <vue-ads-pagination
            :total-items="200"
            :max-visible-pages="5"
            :page="page"
            :loading="loading"
            @page-change="pageChange"
            @range-change="rangeChange"
        >
            <template slot-scope="props">
                <div class="vue-ads-pr-2 vue-ads-leading-loose">
                    Items {{ props.start }} tot {{ props.end }} van de {{ props.total }}
                </div>
            </template>
            <template
                slot="buttons"
                slot-scope="props"
            >
                <vue-ads-page-button
                    v-for="(button, key) in props.buttons"
                    :key="key"
                    v-bind="button"
                    @page-change="page = button.page"
                />
            </template>
        </vue-ads-pagination>
    </div>
</template>
<script>
import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
import '../node_modules/vue-ads-pagination/dist/vue-ads-pagination.css';

import VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination';

export default {
    name: 'App',
    
    components: {
        VueAdsPagination,
        VueAdsPageButton,
    },

    data () {
        return {
            loading: false,
            page: 5,
        };
    },

    methods: {
        pageChange (page) {
            this.page = page;
            console.log(page);
        },
        
        rangeChange (start, end) {
            console.log(start, end);
        },
    },
};
</script>

Properties

  • page(type: number||string, default: 0) A zero-based number that represents the page or ‘…’.
  • active(type: boolean, default: false) Is the current button active?
  • disabled(type: boolean, default: false) Is the current button disabled?
  • html(type: string, required) This string is shown in the button.
  • title(type: string, default: ”) If you want to add a title to the button, you can fill this attribute.
  • loading(type: boolean, default: false) Indicates if the button has to show a loading icon.
  • disable-styling(type: boolean, default: false) Remove all styling classes.

vue ads pagination component, vue-ads-pagination plugin/github


See Demo And Download

Developer Name: arnedesmedt

Official Website: Click Here

Share

You may also like...

Leave a Reply

Your email address will not be published.