") center/100% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-checked[disabled]{background:#3d8feb url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-checked:focus{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-checked:hover{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-mixed[disabled]{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-mixed:focus{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed:hover{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-dialog-wrapper{line-height:0;position:absolute;top:0;left:0;z-index:9999}.b-dialog{background:#fff;border:1px solid transparent;border-radius:2px;box-shadow:1px 2px 3px transparent;color:#111;line-height:1.5;padding:1.5rem;}.b-dialog *:last-child{margin-bottom:0}.b-text{white-space:nowrap}.b-image{background:#ccc;background-size:cover;background-position:center;border:0;display:inline-block;line-height:0;position:relative;height:auto;width:100%}.b-image::after,.b-image-loading::before,.b-image-error::before{content:'';display:block;padding-top:100%;width:100%}.b-image-loading::before,.b-image-error::before{position:absolute;top:0;bottom:0;left:0;right:0}.b-image-loading{background:#ccc;}.b-image-loading::before{background:#979fa8;background:url("data:image/gif;base64,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") no-repeat center}.b-image-error{background:#ccc;}.b-image-error::before{background:url("data:image/svg+xml;charset=utf8, ") no-repeat center}.b-input-wrapper{font-size:.75rem;position:relative;width:100%}.b-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid transparent;border-radius:2px;color:#c5cfdb;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:.75em;position:relative;z-index:1;width:100%;transition:all 200ms ease;}.b-input + .b-input-placeholder{background:#272b33;border-color:transparent;color:rgba(197,207,219,0.5)}.b-input[disabled]{color:#c5cfdb;cursor:not-allowed;opacity:.3;}.b-input[disabled] + .b-input-placeholder,.b-input[disabled]:active + .b-input-placeholder,.b-input[disabled]:focus + .b-input-placeholder,.b-input[disabled]:hover + .b-input-placeholder{background:#272b33;border-color:transparent}.b-input:active{color:#c5cfdb;}.b-input:active + .b-input-placeholder{background:#272b33;border-color:#3d8feb}.b-input:focus{color:#c5cfdb;}.b-input:focus + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input:hover{color:#c5cfdb;}.b-input:hover + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input-placeholder{overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;white-space:nowrap;text-overflow:ellipsis;z-index:0}.b-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;}.b-modal-wrapper .b-dialog-wrapper{-ms-flex-negative:0;flex-shrink:0;max-width:80vw;position:relative}.b-modal-wrapper .b-dialog{background:#fff;border:1px solid #e6e6e6;box-shadow:1px 2px 3px transparent;color:#111}.b-modal-mask{background:rgba(39,43,51,0.9);position:fixed;top:0;left:0;right:0;bottom:0}.b-pagination-control.b-segmented-control-option.b-button{background:transparent;border-color:transparent;color:#979fa8;}.b-pagination-control.b-segmented-control-option.b-button[disabled],.b-pagination-control.b-segmented-control-option.b-button[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button[disabled]:hover{background:transparent;border-color:transparent;color:#979fa8}.b-pagination-control.b-segmented-control-option.b-button:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button:focus{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button:hover{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected{background:transparent;border-color:transparent;color:#fff;}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled],.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:hover{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:transparent;border-color:transparent;color:#fff}.b-popover{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}.b-popover .b-dialog{background:#272b33;border:1px solid #000;box-shadow:1px 2px 3px transparent;color:#c5cfdb}.b-popover-caret{position:relative;-webkit-transform-origin:center;transform-origin:center;height:16px;width:16px}.b-popover-caret-border{fill:#3d8feb}.b-popover-caret-fill{fill:#3d8feb}.b-popover-anchor-y-start.b-popover-self-y-end .b-popover-caret{margin-top:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.b-popover-anchor-y-end.b-popover-self-y-start .b-popover-caret{margin-bottom:-3px}.b-popover-anchor-x-start.b-popover-self-x-end{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-start.b-popover-self-x-end .b-popover-caret{margin-left:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.b-popover-anchor-x-end.b-popover-self-x-start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-end.b-popover-self-x-start .b-popover-caret{margin-right:-3px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.b-progress-wrapper{border:1px solid #3d8feb;border-radius:2px;overflow:hidden;position:relative;height:30px;width:100%}.b-progress-wrapper[data-progress]::before{color:#fff;content:attr(data-progress);line-height:30px;padding-left:10px;position:relative;text-align:left;z-index:1}.b-progress{background:#3d8feb;position:absolute;top:0;left:0;bottom:0}.b-progress-indeterminate{background:#3d8feb;border-color:#3d8feb;top:0;left:0;bottom:0;right:0;-webkit-animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;}.b-progress-indeterminate ~ .b-progress-label{color:#fff}@-webkit-keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}@keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}.b-disclosure-toggle{color:#c5cfdb;cursor:pointer;display:inline-block;font-size:.75rem;padding-left:15px;position:relative;}.b-disclosure-toggle::before{content:'';border-width:5px;border-color:transparent;border-left-color:#c5cfdb;border-style:solid;position:absolute;margin-top:-5px;top:50%;left:4px}.b-disclosure-expanded{color:#c5cfdb;}.b-disclosure-expanded > .b-disclosure-toggle::before{border-top-color:#c5cfdb;border-left-color:transparent;margin-top:-3px;left:0}.b-disclosure-content{margin-top:.5rem;width:100%}.b-radio-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.b-radio,.b-radio-label{cursor:pointer}.b-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border:1px solid #c5cfdb;border-radius:50%;-ms-flex-negative:0;flex-shrink:0;margin:1px 3px 0;padding:0;height:16px;width:16px;transition:all 200ms ease;}.b-radio[disabled],.b-radio[disabled]:active,.b-radio[disabled]:focus,.b-radio[disabled]:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#c5cfdb;cursor:not-allowed;opacity:.3}.b-radio:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio:focus{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio.b-radio-selected,.b-radio.b-radio-selected:hover,.b-radio.b-radio-selected:focus,.b-radio.b-radio-selected:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio-label{line-height:1.2;margin-left:.25em}.b-segmented-control{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.b-segmented-control-option.b-button{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background:#535a66;border:1px solid transparent;border-radius:0;color:#fff;cursor:pointer;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:14px;margin:0;padding:.5em .75em;text-align:center;white-space:nowrap;transition:all 200ms ease;}.b-segmented-control-option.b-button:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}.b-segmented-control-option.b-button:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px}.b-segmented-control-option.b-button:not(:first-of-type){margin-left:-1px}.b-segmented-control-option.b-button[disabled],.b-segmented-control-option.b-button[disabled]:active,.b-segmented-control-option.b-button[disabled]:focus,.b-segmented-control-option.b-button[disabled]:hover,.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]{background:#282d33;border-color:transparent;color:#fff;opacity:.3}.b-segmented-control-option.b-button:focus{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:hover{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:active,.b-segmented-control-option.b-button.b-segmented-control-option-selected,.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus,.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:#282d33;border-color:transparent;color:#fff}.b-segmented-control-option.b-button.b-segmented-control-option-selected{z-index:1}.b-tokenfield-wrapper{background:#272b33;border:1px solid transparent;border-radius:2px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.75rem;}.b-tokenfield-wrapper .b-typeahead-wrapper{background:transparent;border:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead,.b-tokenfield-wrapper .b-typeahead-hint{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:10px}.b-tokenfield{display:-webkit-box;display:-ms-flexbox;display:flex}.b-tokenfield-tokens{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;margin:5px 0 5px 5px;}.b-tokenfield-tokens:empty{margin:0}.b-tokenfield-token{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;border:1px solid #4b5363;border-radius:2px;color:#c5cfdb;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:1;margin-right:5px;padding:5px 10px;white-space:nowrap;transition:all 200ms ease-in-out;}.b-tokenfield-token:focus{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:focus .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:hover{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:hover .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:active{background:transparent;border-color:#3d8feb;color:#c5cfdb}.b-tokenfield-token:last-child{margin-right:0}.b-tokenfield-token.b-tokenfield-token-selected{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected .b-tokenfield-token-close{color:rgba(255,255,255,0.5)}.b-tokenfield-token.b-tokenfield-token-selected:focus{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:focus .b-tokenfield-token-close{color:#fff}.b-tokenfield-token.b-tokenfield-token-selected:hover{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:hover .b-tokenfield-token-close{color:#fff}.b-tokenfield-token-close{color:rgba(197,207,219,0.5);cursor:pointer;display:inline-block;font-size:.85em;margin-left:.5rem;transition:all 200ms ease-in-out}.b-typeahead-wrapper{background:#272b33;border:1px solid transparent;font-size:.75rem;position:relative;}.b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-match-wrapper{background:#272b33;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border:1px solid #000;margin-top:-1px;max-height:300px;overflow:hidden;overflow-y:auto;position:absolute;left:0;right:0;top:100%;z-index:99}.b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match{background:#272b33;color:#b3b3b3;cursor:pointer;font-size:13px;line-height:1;padding:.25em .5em;}.b-typeahead-match:focus{background:#272b33;color:#b3b3b3;}.b-typeahead-match:focus .b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match:hover{background:#1f2229;color:#b3b3b3;}.b-typeahead-match:hover .b-typeahead-match-highlight{background:#1f2229;color:#fff}.b-typeahead-match.b-typeahead-match-selected,.b-typeahead-match.b-typeahead-match-selected:focus,.b-typeahead-match.b-typeahead-match-selected:hover{background:#3d8feb;color:#ccc;}.b-typeahead-match.b-typeahead-match-selected .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:focus .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:hover .b-typeahead-match-highlight{background:#3d8feb;color:#fff}.demo-loose-list > *:not(:last-child)::after{content:', '}.tall-button{height:50px}.checkbox-group-demo{-webkit-columns:3;-moz-columns:3;columns:3}@media all and (max-width:600px){.checkbox-group-demo{-webkit-columns:2;-moz-columns:2;columns:2}}.b-checkbox:focus{outline:0}.dialog-demo-close-button{background:none !important;border:0;color:#ccc;cursor:pointer;line-height:1;padding:.5rem;position:absolute;top:0;right:0;transition:color 200ms ease;}.dialog-demo-close-button:hover,.dialog-demo-close-button:focus{color:#555}.dialog-demo-close-button:active{color:#c5cfdb}.dialog-demo-close-button::before{content:'X'}.demo-image figure:not(:first-child){margin-left:5px}.demo-image figure:not(:last-child){margin-right:5px}.demo-modal h3{color:inherit;margin-top:0}.demo-modal-cancel-button,.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{background:#3d8feb;border-color:transparent;color:#fff}.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{opacity:.8}.demo-pagination .b-segmented-control-option-selected{font-weight:700}.demo-pagination .b-pagination-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:7em;margin:0;padding:1rem;}.demo-pagination .b-pagination-item + .b-pagination-item{border-top:1px solid #979fa8}.demo-pagination .b-pagination-item .card-left{-ms-flex-preferred-size:50%;flex-basis:50%}.demo-pagination .b-pagination-item .card-right{-ms-flex-preferred-size:50%;flex-basis:50%;font-size:11pt}.demo-pagination .b-pagination-item .card-left strong{font-size:18pt}@media all and (max-width:800px){.demo-pagination .b-pagination-control{padding-left:.25em;padding-right:.25em}.demo-pagination .b-pagination-control-custom{display:none}.demo-pagination .b-pagination-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto}}.demo-popover .b-dialog{outline:0}.demo-popover .b-dialog-body{padding:0}.demo-popover.b-popover-anchor-y-start.b-popover-self-y-end .b-dialog{border-bottom:3px solid #3d8feb}.demo-popover.b-popover-anchor-y-end.b-popover-self-y-start .b-dialog{border-top:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-start.b-popover-self-x-end .b-dialog{border-right:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-end.b-popover-self-x-start .b-dialog{border-left:3px solid #3d8feb}@media (max-width:600px){.demo-popover{max-width:75vw}}.progress-demo > *{-ms-flex-item-align:start;align-self:flex-start;margin:0 1em}.progress-demo > :first-child{margin-left:0}.progress-demo > :last-child{margin-right:0}#progress-meter .b-progress{position:absolute;right:0;left:0;bottom:0;top:auto}#progress-meter[data-progress]::before{text-align:center;position:absolute;left:0;right:0;z-index:1}
View Source Pagination View and navigate heterogeneous content one page at a time.
Pagination is implemented as an encapsulated view system, accepting an array of items as input.
Installation# npm i --save boundless-pagination
Pagination can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
import { Pagination } from 'boundless' ;
Component Instance Methods# When using Pagination
in your project, you may call the following methods on a rendered
instance of the component. Use refs
to get the instance.
Props# Required Props# Name Implementation Description getItem
Expects function
Default Value ( ) = > { }
called with a desired item index when that item comes into view;
accepts a Promise
if you need to fetch the row asynchronously
identifier
Expects string
Default Value uuid ( )
a unique name for the data source being consumed; pass a
different name to cause the view to fully reset and pull fresh data
totalItems
Expects number
Default Value null
the total number of items to be displayed in the view
Optional Props# Name Implementation Description *
Expects any
any React-supported attribute
after
Expects any renderable
Default Value null
arbitrary content to be rendered after the items in the DOM
before
Expects any renderable
Default Value null
arbitrary content to be rendered before the items in the DOM
controlWrapperProps
Expects object
Default Value { }
*
Expects any
any React-supported attribute
customControlContent
Expects any renderable
Default Value null
allows for arbitrary content to be rendered into the control area
hidePagerIfNotNeeded
Expects bool
Default Value false
does not render the paging controls if the number of items supplied
to the view is less-than-or-equal-to the number of items to show
per page via props.numItemsPerPage
initialPage
Expects custom
Default Value 1
the (one-indexed ) number of the page that should be initially
displayed; must be a positive integer less than or equal to
the total number of pages
itemLoadingContent
Expects any renderable
Default Value undefined
allows for arbitrary content to be rendered into pagination items
as they're loading if the backing data is a Promise
itemToJSXConverter
Expects function
Default Value ( x) = > x
an function to specify how an item should be converted
to JSX, if it is not already renderable by React
const getItem = ( ) = > ( { id: 1234 , text: 'foo' } ) ;
const objToJSX = ( { id, text} ) = > < div data-id = { id} > { text} </ div> ;
< Pagination
getItem = { getItem}
identifer = ' foo'
itemToJSXConverter = { objToJSX}
totalItems = { 1 } />
itemWrapperProps
Expects object
Default Value { }
*
Expects any
any React-supported attribute
jumpToFirstPageControlContent
Expects any renderable
Default Value '⇤'
content to be displayed inside of the "First page" control button
jumpToLastPageControlContent
Expects any renderable
Default Value '⇥'
content to be displayed inside of the "Last page" control button
jumpToNextPageControlContent
Expects any renderable
Default Value '→'
content to be displayed inside of the "Next page" control button
jumpToPreviousPageControlContent
Expects any renderable
Default Value '←'
content to be displayed inside of the "Previous page" control button
numItemsPerPage
Expects custom
Default Value 10
the maximum number of items to be displayed on each page; must be
greater than zero
numPageToggles
Expects number
Default Value 5
the maximum number of pages to be displayed in the control bar at
one time
position
Expects Pagination.position.ABOVE or
Pagination.position.BELOW or
Pagination.position.BOTH
Default Value Pagination. position. ABOVE
determines whether the pagination controls are displayed above,
below, or both above and below the content
showJumpToFirstPageControl
Expects bool
Default Value true
whether the "first page" control button should be displayed
showJumpToLastPageControl
Expects bool
Default Value true
whether the "last page" control button should be displayed
showJumpToNextPageControl
Expects bool
Default Value true
whether the "next page" control button should be displayed
showJumpToPreviousPageControl
Expects bool
Default Value true
whether the "previous page" control button should be displayed
showPaginationState
Expects bool or function
Default Value true
renders an element called .b-pagination-control-state
that
contains the current state of the pagination like "1 of 10";
alternatively, this prop also accepts a function that it will
call with the currentPage and totalPages for you to format:
showPaginatedState= {
( currentPage, totalPages) = > (
< div className = ' foo' >
You're on page { currentPage} of { totalPages} pages!
</ div>
)
}