Pager
import Pager from '@concur/nui-widgets/lib/Pager/Pager';The Pager component provides styled “Previous” and “Next” buttons (pager items) that can be used in conjunction with any other components that need the ability to page forward and backward.
Examples
Default
By default, the pager items will appear centered in their container.
<Pager>
<Pager.Item href='#' >Previous</Pager.Item>
{' '}
<Pager.Item href='#'>Next</Pager.Item>
</Pager>Alignment
To align the pager items to the right and left, add the next and previous properties, respectively.
<Pager>
<Pager.Item href='#' previous ><i className='icon-arrow-4-w' /> Previous Page</Pager.Item>
<Pager.Item href='#' next>Next Page <i className='icon-arrow-4-e' /></Pager.Item>
</Pager>Disabled State
Use the disabled property to make a pager item appear and act disabled.
<Pager>
<Pager.Item
href='#'
previous ><i className='icon-arrow-4-w' /> Previous</Pager.Item>
<Pager.Item
disabled
href='#'
next >Next <i className='icon-arrow-4-e' /></Pager.Item>
</Pager>Usage
Pager
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | Node | Collection of Pager.Item components in the Pager. | |
className | String | Custom classes to be added to the wrapping <ul>. |
Callbacks
| Property | Parameters | Description |
|---|---|---|
onSelect | eventKey, event | Called when a nested pager item is selected. |
Pager.Item
Properties
| Property | Type | Default | Description |
|---|---|---|---|
buttonClassName | String | Custom classes to be added to the <button>, or <a> if you provided an href. | |
children | Node | The content. | |
className | String | Custom classes to be added to the <li>. | |
disabled | Boolean | false | Controls whether the item is enabled or disabled. |
eventKey | Node | eventKey passed to the pager’s onSelect callback. | |
href | String | Location to which the applicaton will navigate when item is selected. | |
next | Boolean | false | Controls whether the item pages forward. |
previous | Boolean | false | Controls whether the item pages backward. |
Callbacks
| Property | Parameters | Description |
|---|---|---|
onSelect | eventKey, event | Called when the pager item is selected. |