A light and accesible Material Design page indicator
paper-pager is a Material Design page indicator that is easy to customise and allows controlling the selected page by clicking on the pager.
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
Import the element
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).
selected is the index of currently selected page, can be updated by clicking on dots representing each page.
Check out documentation for more info
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 :wink:
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
Made by me, inspired by Google's Material Design page indicator that can be seen in different places across Android N. Other resources:
Shared on MIT license, check LICENSE
Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.
- polymer#Polymer/polymer#1.9 - 2
- iron-selector#PolymerElements/iron-selector#1 - 2
- iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2
- Polymer 2.0+
- Polymer 1.0+ in 0.1.0
- Polymer 3.0+ in 2.0.0
- Browser Independent