Skip to content
A light and accesible Material Design page indicator
Branch: master
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
test
.gitignore
.travis.yml
LICENSE
README.md
analysis.json
index.html
package-lock.json
package.json
paper-pager.js
polymer.json

README.md

Published on webcomponents.org Build Status npm

paper-pager

paper-pager is a Material Design page indicator that is easy to customise and allows controlling the selected page by clicking on the pager.

Installation

Make sure you have installed NPM, then simply run
$ npm install --save @myfrom/paper-pager

Newer versions of this element work only with Polymer 3.
For backwards compatibility use versions 1.x

Usage

Import the element

import '@myfrom/paper-pager';

and then just use it as normal element.

<paper-pager dark></paper-pager>
<!-- `dark` attribute is only for visibility on white background -->

If you want it to work on older browsers you must compile it from ES6 to ES5.

The default item count is 3, you can set it either by specyfing itemsCount property (takes a number) or binding an Array of items to items property (this will basically set itemsCount to length of provided array). Property selected is the index of currently selected page, can be updated by clicking on dots representing each page.

Check out documentation for more info

Contributing

If you found a bug or have an idea for a new feature, be sure to open an issue but first check if there isn't one open already. I'm also very happy to see any Pull Requests, but to save you and me some work, comment on issues if you are planning to work on them - that way you make sure two people won't do the same thing 😉

Local development and testing

For local development use Polymer CLI. It's a very easy tool for working on Polymer apps and elements. Serve your element with $ polymer serve and before you submit a PR run

$ polymer lint
$ polymer test

Credits

Made by me, inspired by Google's Material Design page indicator that can be seen in different places across Android N. Other resources:

License

Shared on MIT license, check LICENSE

You can’t perform that action at this time.