README
sling-web-component-paginator
Install
npm install sling-web-component-paginator
Tag
<sling-paginator></sling-paginator>
Dependencies
- sling-framework
- sling-helpers
Attributes and properties
| Name | Type | Default Values | ReflectToAttribute | Observer | callSdk |
|---|---|---|---|---|---|
| selected | Number | :heavy_check_mark: | |||
| total | Number | :heavy_check_mark: |
Description
| Name | Description |
|---|---|
| selected | Representes the currently selected page. |
| total | Representes the total of pages. If set to 0 or undefined, only the left and right arrows will appear (infinite mode); if set to 1, the whole component disappears and if set to 2 or more, the page numbers will appear along with the left and right arrows (default mode). |
Events
- paginate
Description: The event is triggered when the arrows are clicked or the current page changes. If the paginator is set to infinite mode, the event detail will be { type: 'previous' }, if the left arrow is clicked; or { type: 'next' } if the right arrow is clicked. If the paginator is set to default mode, the event detail will be { type: 'index', index: <Number> }, where the index will be the current page.
Examples
All component examples can be emulated using the npm start sling-web-component-paginator command.
Usage
<sling-paginator></sling-paginator>
<sling-paginator total="5"></sling-paginator>
<sling-paginator total="5" selected="3"></sling-paginator>
<sling-paginator total="12" selected="3"></sling-paginator>
