{% 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 %}
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
align
|
Horizontally align the items. |
string
|
center
|
|
|
total
*
|
Total pages within the pagination |
integer
| — |
|
|
current
*
|
Current page selected |
integer
| — |
|
|
pages
*
|
A keyed array of page item objects where the key is the page number |
array
, object
|
— |
|
|
first
|
A link object for the first page |
object
| — |
|
|
previous
|
A link object for the previous page (e.g. if on page 3, this links to page 2) |
object
| — |
|
|
next
|
A link object for the next page (e.g. if on page 3, this links to page 4) |
object
| — |
|
|
last
|
A link object for the last page |
object
| — |
|
|
previousText
|
Text to be displayed for the previous anchor |
string
|
Previous
|
|
|
nextText
|
Text to be displayed for the next anchor |
string
|
Next
|
|
npm install @bolt/components-pagination
For better internationalization support, align prop uses the start (left) and end (right) vocab. This helps the pagination to have the desired alignment regardless of the writing direction of the language being displayed.
In this case, you must set the align prop to be start so it is not centered within the cell.
Something on the right