Overview
The sequence of numbers assigned to pages on a search results page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
Install via NPM
npm install @bolt/components-pagination
Usage
{% include "@bolt-components-pagination/pagination.twig" with {
current: 5,
total: 10,
first: {
href: 'page-1-url'
},
previous: {
href: 'page-4-url'
},
pages: {
3: {
href: 'page-3-url'
},
4: {
href: 'page-4-url'
},
5: {
href: 'page-5-url'
},
6: {
href: 'page-6-url'
},
7: {
href: 'page-7-url'
}
},
next: {
href: 'page-6-url'
},
last: {
href: 'page-10-url'
}
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
Horizontally align the items. |
string
|
center
|
|
|
|
Total pages within the pagination |
number
| — |
|
|
|
Current page selected |
number
| — |
|
|
|
A keyed array of page item objects where the key is the page number |
array or object |
— |
|
|
|
A link object for the first page |
object
| — |
|
|
|
A link object for the previous page (e.g. if on page 3, this links to page 2) |
object
| — |
|
|
|
A link object for the next page (e.g. if on page 3, this links to page 4) |
object
| — |
|
|
|
A link object for the last page |
object
| — |
|
|
|
Text to be displayed for the previous anchor |
string
|
Previous
|
|
|
|
Text to be displayed for the next anchor |
string
|
Next
|
|