@logo-elements/pagination NPM

@logo-elements/pagination

Simple, easy to use component for pagination

Usage

Installation

npm install --save @logo-elements/pagination

In an html file

<html>
  <head>
    <script type="module" src="@logo-elements/pagination/logo-elements-pagination.js"></script>
  </head>
  <body>
    <logo-elements-pagination total-items="50" item-per-page="10"></logo-elements-pagination>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@logo-elements/pagination/logo-elements-pagination';
import '@logo-elements/pagination/icons/logo-elements-pagination-icons';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <logo-elements-pagination total-items="50" item-per-page="10"></logo-elements-pagination>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Custom icons

Icons can be customized by importing a different iconset and setting the element values "nextIcon" and "previousIcon".

import '@polymer/iron-iconset-svg/iron-iconset-svg.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

const template = html`
    <iron-iconset-svg name="logo-elements-pagination" size="24">
        <svg><defs>
            <g id="next-arrow"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g>
            <g id="previous-arrow"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g>
        </defs></svg>
    </iron-iconset-svg>
`;

document.head.appendChild(template.content);

Custom position

By default the logo elements pagination component is positioned in the right side of it's container. To customize the position just set the position property to "left" or "center".

Custom page number

By default the logo elements pagination component shows a maximum of 5 pages to navigate. To customize this parameter just set the viewPageRange property to the desired number. Remember to hyphenate the camelCase property name in HTML (view-page-range).