A paper-y pagination control.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
screenshots
test
.gitignore
README.md
bower.json
index.html
vellum-pager-icons.html
vellum-pager.html

README.md

vellum-pager

A pagination control.

Demo

Simple Example

<vellum-pager pages="50"></vellum-pager>

basic

Custom Distance

<vellum-pager distance="5" pages="100"></vellum-pager>

distance

Bound Page

<template is="dom-bind">
  <vellum-pager pages="100" page="{{page}}"></vellum-pager>
  <p>Current page: <strong>{{page}}</strong></p>
</template>

bound-page

Arrows

<template is="dom-bind">
  <vellum-pager just-arrows pages="100" page="{{page}}"></vellum-pager>
  <p>Current page: <strong>{{page}}</strong></p>
</template>

arrows

a11y

The host element is focusable (as well as the clickable links) and as long as the component has focus you can navigate with left and right arrow keys and use home and end to go to the first and last pages. In addition, pageup and pagedown can be used to skip large numbers of pages, determined by the skipDistance property (default 10).

a11y