npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuejs-accessible-pagination

v1.1.1

Published

A simple pagination acessible component for Vue.js

Downloads

9

Readme

vuejs-paginate

npm version Build Status Code Climate

NPM

This is a copy of vuejs-paginate with the purpose of turning into an accessible component

A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate.

Easy to use by providing simple api. And you can customize the style of this component by css.

Installation

NPM

Install the npm package.

$ npm install vuejs-paginate --save

Register the component.

  • ES5
var Paginate = require('vuejs-paginate')
Vue.component('paginate', Paginate)
  • ES6
import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)

Note: For version <= 0.5.0, use Vue.use(Paginate) to register the component after import the package. But recommend to use the latest version now.

CDN

Include the source file.

<!-- use the latest release -->
<script src="https://unpkg.com/vuejs-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/[email protected]"></script>

Register the component.

Vue.component('paginate', VuejsPaginate)

Usage

In Vue Template

Basic Usage

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'className'">
</paginate>

Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop page-count or pageCount. They are leading to the same result.

So this is also avaliable

<paginate
  :pageCount="20"
  :clickHandler="functionName"
  :prevText="'Prev'"
  :nextText="'Next'"
  :containerClass="'className'">
</paginate>

Example

<template>
  <paginate
    :page-count="20"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</template>

<script>
export default {
  methods: {
    clickCallback (pageNum) => {
      console.log(pageNum)
    }
  }
}
</script>

<style lang="css">
.pagination {
}
.page-item {
}
</style>

Value Binding

Use v-model to set the selected page number. You can programmatically modify the current page by using this.

<template>
  <paginate
    v-model="page"
    :page-count="20"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</template>

<script>
export default {
  data() {
    return {
      page: 10
    }
  }
}
</script>

In HTML

Must use kebab-case for props in pure HTML.

Example

JavaScript

Vue.component('paginate', VuejsPaginate)

new Vue({
  el: '#app',
  methods: {
    clickCallback: function(pageNum) {
      console.log(pageNum)
    }
  }
})

HTML

<div id="app">
  <paginate
    :page-count="10"
    :container-class="pagination"
    :prev-text="prev"
    :next-text="next"
    :click-handler="clickCallback">
  </paginate>
</div>

Props

| Name                                        | Type | Description | | ----------------- | :--- | :--- | | page-count | Number | Total count of pages. required | | page-range | Number | Range of pages which displayed. default: 3 (Note: It is recommended to use an odd number, so that the same number of pages are displayed before and after the active page. If using an even number, there will be one more page number before the active page than after the current page) | | margin-pages | Number | The number of displayed pages for margins. default: 1 | | prev-text | String | Text for the previous button. You can use HTML here. default: Prev | | next-text | String | Text for the next button. You can use HTML here. default: Next | | break-view-text | String | Text for the break view indicator. default: ... | | initial-page Deprecated after v2.0.0 | Number | The index of initial page which selected. default: 0 | | force-page | Number | The page number of overridden selected page. | | click-handler | Function | The method to call when page clicked. Use clicked page number as parameter. | | container-class | String | CSS class name for the layout. | | page-class | String | CSS class name for tag li of each page element. | | page-link-class | String | CSS class name for tag a of each page element. | | prev-class | String | CSS class name for tag li of previous element. | | prev-link-class | String | CSS class name for tag a of previous element. | | next-class | String | CSS class name for tag li of next element. | | next-link-class | String | CSS class name for tag a of next element. | | break-view-class | String | CSS class name for tag li of break view element. | | break-view-link-class | String | CSS class name for tag a of break view element. | | active-class | String | CSS class name for active page element. default: active | | disabled-class | String | CSS class name for disabled page element. default: disabled | | first-last-button | Boolean | Support buttons to turn to the first and last page. default: false | | first-button-text | String | Text for first button. (Not visible when first-last-button is false. You can use HTML here.) default: 'First' | | last-button-text | String | Text for last button. (Not visible when first-last-button is false. You can use HTML here.) default: 'Last' | | hide-prev-next | Boolean | Hide prev/next button when there is no previous or next page. default: false | | accessibility-title | String | title to be read by accessibility tools aria-label. default: 'Navegação de páginas' |

Customize inner HTML (experimental)

You can customize the inner HTML of the previous button, next button, and break view indicator, with the slot tag.

Slot names

| Name | Description | | --- | --- | | prevContent | Previous button | | nextContent | Next button | | breakViewContent | Break view indicator |

Note Slot of prevContent and nextContent are not supported after v1.9.5. You can directly set the HTML by prev-text and next-text props.

Example

<paginate
  :page-count="10"
  :container-class="pagination"
  :prev-text="prev"
  :next-text="next"
  :click-handler="clickCallback">

  <span slot="prevContent">Changed previous button</span>
  <span slot="nextContent">Changed next button</span>
  <span slot="breakViewContent">
    <svg width="16" height="4" viewBox="0 0 16 4">
      <circle fill="#999999" cx="2" cy="2" r="2" />
      <circle fill="#999999" cx="8" cy="2" r="2" />
      <circle fill="#999999" cx="14" cy="2" r="2" />
    </svg>
  </span>

</paginate>

Demo

You can see the demo for quickly understand how to use this package.

$ git clone [email protected]:lokyoung/vuejs-paginate.git
$ cd vuejs-paginate
$ npm install
$ npm run demo

Check the code from ./demo/index.html and ./demo/App.vue.