@logo-elements/pagination
Version:
Simple, easy to use component for pagination
68 lines (54 loc) • 2.34 kB
Markdown
# @logo-elements/pagination
Simple, easy to use component for pagination
[](https://www.npmjs.com/package/@logo-elements/pagination)
## Usage
### Installation
```
npm install --save @logo-elements/pagination
```
### In an html file
```html
<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
```js
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".
```js
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)**.*
### For more detailed information, please visit:
[Logo Elements Documentation ↗](http://elements.logo.com.tr)