Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
Pagination
1 of
4 pages
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--pagination" data-pagination>
<div class="bx--pagination__left">
<div class="bx--select">
<select id="select-id-pagination" aria-label="select number of items per page" class="bx--select-input" data-items-per-page>
<option class="bx--select-option" value="10">10</option>
<option class="bx--select-option" value="20">20</option>
<option class="bx--select-option" value="30">30</option>
<option class="bx--select-option" value="40">40</option>
<option class="bx--select-option" value="50">50</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"/>
</svg>
</div>
<span class="bx--pagination__text">Items per page | </span>
<span class="bx--pagination__text">
<span data-displayed-item-range>1-10</span> of
<span data-total-items>40</span> items</span>
</div>
<div class="bx--pagination__right">
<span class="bx--pagination__text">
<span data-displayed-page-number>1</span> of
<span data-total-pages>4</span> pages</span>
<button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
<svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"/>
</svg>
</button>
<label for="page-number-input" class="bx--visually-hidden">Page number input</label>
<input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
<button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
<svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"/>
</svg>
</button>
</div>
</div>
Documentation
SCSS
Modifiers
Use these modifiers with .bx--pagination__button
class.
Selector | Description |
---|---|
.bx--pagination__button--backward |
Applies styles for backward button |
.bx--pagination__button--forward |
Applies styles for forward button |
.bx--pagination__button--no-index |
Applies styles for disabled button |
JavaScript
Options
Option | Default Selector | Description |
---|---|---|
selectorInit |
[data-pagination] |
The selector to find the pagination |
selectorItemsPerPageInput |
[data-items-per-page] |
The selector to find the input that determines the number of items per page. |
selectorPageNumberInput |
[data-page-number-input] |
The selector to find the input that changes the page displayed. |
selectorPageBackward |
[data-page-backward] |
The selector to find the button that goes back a page. |
selectorPageForward |
[data-page-forward] |
The selector to find the button that goes forward a page. |
Events
Name | Default Value | Description |
---|---|---|
eventItemsPerPage |
itemsPerPage |
Custom event fired when a user changes the number of items per page. event.detail.value contains the number of items a user wishes to see. |
eventPageNumber |
pageNumber |
The name of the custom event fired when a user inputs a specific page number. event.detail.value contains the value that the user input. |
eventPageChange |
pageChange |
The name of the custom event fired when a user goes forward or backward a page. event.detail.direction contains the direction a user wishes to go. |