Pagination
#
InstallationFor detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.
#
CDN<script src="https://unpkg.com/@pearson-ux/pagination"></script>
#
NPMnpm i @pearson-ux/pagination --save
#
Demo#
Standard<pearson-pagination lastpage="10" ellipsisat="5"></pearson-pagination>
#
Compact<pearson-pagination compact lastpage="10"> </pearson-pagination>
#
StructureTo add pagination, just add the markup in your app where you want it displayed.
#
API#
RequiredAll these attributes are required.
Attribute | Type | Default | Description |
---|---|---|---|
lastpage | String | unset | The last page you want pagination to end with |
#
OptionalAll these attributes are optional.
Attribute | Type | Default | Description |
---|---|---|---|
ellipsisat | String | unset | Denotes the placement of the ellipsis (does not apply for compact mode) If the number provided does not meet the minimum requirements, it will default to best position available. |
compact | Bool | unset | Sets the pagination to compact mode |
#
EventsThe pearson-pagination
component emits three different events:
Event | Description |
---|---|
nextPage | Will fire when the user interacts with the next page button |
prevPage | Will fire when the user interacts with the previous page button |
newPage | Will fire when the user interacts with single page number |
const pagination = document.querySelector('pearson-pagination');
pagination.addEventListener('nextPage', () => { // Do something when the next page button is clicked});
pagination.addEventListener('prevPage', () => { // Do something when the prev page button is clicked});
pagination.addEventListener('newPage', () => { // Do something when a single page number is clicked});
#
HTML MarkupDo you want to use your own JS to make the pagination function? No problem, use the markup below along with CSS to build pagination with your own JS.
Important note: You can follow the UXF guidelines to view the suggested functionality of the modal window.
#
Standard Markup<nav data-id="standardPagination" aria-label="pagination" class="gr-pagination" data-type="standard" data-pages-total="10" data-max-buttons="5" data-active-page="1" data-label="page" data-label-plural="pages"> <button class="gr-btn icon-btn-18" aria-label="Previous page"> <span> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#previous-18"></use> </svg> </span> </button> <a href="#" aria-current="page"><span>1</span></a> <a href="#"><span>2</span></a> <a href="#"><span>3</span></a> <a href="#"><span>4</span></a> <a href="#"><span>5</span></a> <a href="#" class="ellipsis" disabled="">...</a> <a href="#"><span>100</span></a> <button class="gr-btn icon-btn-18" aria-label="Next page"> <span> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-18"></use> </svg> </span> </button></nav>
#
Compact Markup<nav data-id="compactPagination" aria-label="pagination" class="gr-pagination" data-pages-total="10" data-type="compact" data-active-page="1" data-label="page" data-label-plural="pages"> <button class="gr-btn icon-btn-18" aria-label="Previous page"> <span> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#previous-18"></use> </svg> </span> </button> <span class="compact-text">Page <span class="current-page">1-5</span> of <span class="total-pages">20</span></span> <button class="gr-btn icon-btn-18" aria-label="Next page"> <span> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-18"></use> </svg> </span> </button></nav>