@vonage/vwc-pagination v2.45.0
vwc-pagination
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.
Structure
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).
API
vwc-pagination
is rolling around the total number of pages and the currently selected page.
Attributes / Properties
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
total
is adjusted to smaller number andselected
appears to be out of range, theselected
is set to the closest new available page (change
event is fired as appropriate)
Events
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 }) |
Customization
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).
Slots
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 |
3 months ago
10 months ago
9 months ago
10 months ago
8 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago