@logo-elements/pagination
v23.0.1
Published
Simple, easy to use component for pagination
Downloads
62
Readme
@logo-elements/pagination
Simple, easy to use component for pagination
Usage
Installation
npm install --save @logo-elements/paginationIn 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).