Anatomy
Note: Image is not to scale
- Container of dots
Options
Index
Index determines the position of the currently active dot.
Amount
This is the total amount of dots in the range.
Orientation
If the dots are oriented left to right or top to bottom. It defaults to a horizontal orientation.
Guidance
Only controllable externally
An external component must be implemented to dynamically control the index and/or amount of dots. A typical use case would be a carousel of pictures.
Accessibility
The root node has the role progressbar. The label prop is required, and the unitName prop is optional.
When unitName is specified, the aria-valuetext will work with aria-valuemax and aria-valuenow to read the pagination progress. For example, if unitName="Page", the aria-valuetext will read "Page aria-valuenow of aria-valuemax".
API Reference
PaginationDots
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| index | The 1-indexed position of the currently active dot | number | 1 | False |
| label | The input's label text, required for accessibility | string | Pagination Dots | False |
| amount | The total amount of dots in range | number | ---- | True |
| unitName | Specifies the type of element represented by the dots (e.g., "Page") | string | ---- | False |
| orientation | If the dots are oriented left to right or top to bottom | "horizontal" | "vertical" | horizontal | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |