# @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
```
### 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`
`;
}
}
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`
`;
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)