Components
Pagination
Use: Deployed
Pagination is navigation for paginated content.
Example
View va-pagination in Storybook
View va-pagination in StorybookUsage
When to use pagination
- When it is not feasible to show all ordered data on a single page. Examples of content that should be paginated include search results or other multi-page collections of related items.
When to consider something else
- If your content has meaningful groupings or categories.
- Steps in a sequence
- Short collections
- When it is undesirable to have the user pause for navigation. Some alternatives include the infinite scroll pattern or simple un-numbered navigation.
Code usage
Attributes and Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
ariaLabelSuffix |
aria-label-suffix |
string |
'' |
Aria-label suffix text for buttons |
enableAnalytics |
enable-analytics |
boolean |
true |
Whether or not an analytics event will be fired |
maxPageListLength |
max-page-list-length |
number |
10 |
The maximum number of pages to show at once |
page |
page |
number |
The current page number | |
pages |
pages |
number |
The total number of pages | |
showLastPage |
show-last-page |
boolean |
false |
Display last page number when the page count exceeds `maxPageListLength` |
Events
| Name | Description |
|---|---|
component-library-analytics |
The event used to track usage of the component. Fires when a a page is selected if enable-analytics is true. |
pageSelect |
Fires when a page is selected |