2.0.0 • Public • Published

Published on webcomponents.org Build Status npm


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

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


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


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


npm i @myfrom/paper-pager

DownloadsWeekly Downloads






Unpacked Size

36.5 kB

Total Files


Last publish


  • myfrom