Pagination
The pagination component is used to indicate a series of related content exists across multiple views/pages.
Table of contents
Default
This is the default pagination.
Page 1
Visible range
Customize the range of pages to be displayed in the middle. e.g. visibleRange={5}
Page 7
Implementation
bpk-component-pagination
Backpack pagination component.
Installation
Check the main Readme for a complete installation guide.
Usage
import React from 'react'; import BpkPagination from '@skyscanner/backpack-web/bpk-component-pagination'; const Pagination = () => ( <BpkPagination pageCount={20} selectedPageIndex={0} onPageChange={pageIndex => alert(`page ${pageIndex + 1}`)} previousLabel="previous" nextLabel="next" visibleRange={3} pageLabel={(page, isSelected) => `page ${page}`} /> );
Props
Property | PropType | Required | Default Value |
---|---|---|---|
pageCount | number | true | - |
selectedPageIndex | number | true | - |
previousLabel | string | true | - |
nextLabel | string | true | - |
paginationLabel | string | true | - |
pageLabel | func | true | - |
onPageChange | func | false | null |
visibleRange | number | false | 3 |
className | string | false | null |
Theme Props
buttonSecondaryTextColor
buttonSecondaryHoverTextColor
buttonSecondaryActiveTextColor
buttonSecondaryBorderColor
buttonSecondaryHoverBorderColor
buttonSecondaryActiveBorderColor
buttonSecondaryBackgroundColor
buttonSecondaryHoverBackgroundColor
buttonSecondaryActiveBackgroundColor
paginationNudgerActiveColor
paginationNudgerColor
paginationNudgerHoverColor
paginationSelectedBackgroundColor