vwc-pagination component dedicated to provide paged view state representation and management.
This component would be used with another, relevant, layouts, like vwc-data-grid, while both components would establish interoperability based on the APIs described here.
vwc-pagination is an inline block component.
vwc-pagination component is featured with navigational controls (move to previous page, move to next page) and a listed, ellipsed representation of pages (numeric, 1-based).
vwc-pagination is rolling around the total number of pages and the currently selected page.
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
total |
total |
number |
0 |
total number of pages, as provided by the consuming application |
selectedIndex |
selected-index |
number |
-1 |
currently selected page; always has some numeric value except when the total is 0; number reflects a 0-based index (when the first page selected, selected equals to 0) |
prev-disabled |
presence | managed | an auto managed attribute for a custom styling/logic; will be placed when 'go to previous page' control should be disabled, otherwise removed | |
next-disabled |
presence | managed | an auto managed attribute for a custom styling/logic; will be placed when 'go to next page' control should be disabled, otherwise removed |
Note: if the
totalis adjusted to smaller number andselectedappears to be out of range, theselectedis set to the closest new available page (changeevent is fired as appropriate)
| Event | Description |
|---|---|
change |
fired each time selected page changed (also when the initial selection happens, or when total is changed and as an outcome the selected page changed; event.detail: { selectedIndex: number; total: number })
|
vwc-pagination component allows customly slotted prev/next controls (see slots description below).
In order to allow custom styling/behaviour of those parts, there are 2 managed component level attributes: prev-disabled / next-disabled (see above).
vwc-pagination allows the customization via the slots.
| Slot name | Description |
|---|---|
prev-control |
allows to override the default layout of the 'go to previous page' control button |
next-control |
allows to override the default layout of the 'go to next page' control button |