lyne-components
lyne-components copied to clipboard
story(sbb-paginator): initial implementation
We want to provide a paginator component. It's purpose is to provide a pagination functionality for various use cases.
Figma: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=33767%3A8995&mode=design&t=UPHfQU4257pNfPgG-1
Note: The compact mode is out of scope and will be implemented in a separate issue. Depends on #2755
Design Spec:
- Should wrap the page numbers block, the page buttons and items per page
- Should not wrap the content of the page numbers block (the number buttons)
Tech Spec:
- Should have property
length: number = 0
, which represents the number of items in total (not the number of pages) - Should have property
pageIndex: number = 0
, which represents the current page index - Should have property
pageSize: number = 10
, which represents the number of items per page - Should have property
pageSizeOptions?: number[]
, which represents the options for pageSize and if assigned, displays the items per page select - Should have property
pagerPosition: 'start' | 'end' = 'start'
, which indicates where the next/previous page buttons should be rendered - The previous page button is disabled, if the pageIndex is 0 and the next page button is disabled, if pageIndex is the last possible value (i.e. if we only have one page, both are disabled)
- On any page button click, a
pageChanged
event should be emitted with current index and previous index as details
<sbb-paginator
length="100"
pageIndex="0"
></sbb-paginator>