The Pagination component is used to navigate through a large number of pages. It allows users to easily switch between pages by clicking on page numbers or navigating to the first, previous, next, or last page.
Example
/ 3
code
<bp-pagination aria-label="pagination">
<bp-button-icon slot="first"></bp-button-icon>
<bp-button-icon slot="prev"></bp-button-icon>
<bp-field novalidate>
<bp-input type="number" value="1" size="2" min="1" max="99" aria-label="current page"></bp-input>
<bp-field-message>/ 3</bp-field-message>
</bp-field>
<bp-button-icon slot="next"></bp-button-icon>
<bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>
Basic
code
<script type="module">
import '@blueprintui/components/include/pagination.js';
</script>
<bp-pagination aria-label="pagination">
<bp-button-icon slot="prev"></bp-button-icon>
<bp-button-icon slot="next"></bp-button-icon>
</bp-pagination>
1 / 3
code
<bp-pagination aria-label="pagination">
<bp-button-icon slot="prev"></bp-button-icon>
<span aria-label="current page">1 / 3</span>
<bp-button-icon slot="next"></bp-button-icon>
</bp-pagination>
First And Last
1 / 3
code
<bp-pagination aria-label="pagination">
<bp-button-icon slot="first"></bp-button-icon>
<bp-button-icon slot="prev"></bp-button-icon>
<span aria-label="current page">1 / 3</span>
<bp-button-icon slot="next"></bp-button-icon>
<bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>
Install
NPM
import '@blueprintui/components/include/pagination.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/pagination.js/+esm';
</script>
Accessibility
- The Pagination component should be keyboard accessible and support keyboard navigation.
- The Pagination buttons should have appropriate
aria-labels that describe each action.
Properties
Attributes
CSS Properties
| Name | Types | Description |
--gap | | |
Slots
| Name | Types | Description |
default | | |
first | | |
next | | |
prev | | |
last | | |