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		✔️
total	Number		✔️

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>