Skip to content

vwc-pagination 2.39.1

Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-pagination@2.39.1
Install via package.json:
"@vonage/vwc-pagination": "2.39.1"

About this version

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 and selected appears to be out of range, the selected 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

Details


Assets

  • vwc-pagination-2.39.1.tgz

Download activity

  • Total downloads 10
  • Last 30 days 0
  • Last week 0
  • Today 0