ebay-pagination

EbayPagination

The <EbayPagination> is a tag used to create a pagination navigation. It will display up to 9 page links. If pagination doesn't fit the page it will adjust to the available width.

Import JS

import { EbayPagination, EbayPaginationItem } from '@ebay/ui-core-react/ebay-pagination'

Import styles from Skin

import '@ebay/skin/pagination'
import '@ebay/skin/utility'

or if using CSS/SCSS

import '@ebay/skin/pagination.css'
import '@ebay/skin/utility.css'

EbayPagination Usage

<EbayPagination a11yPreviousText="Previous page" a11yNextText="Next page" a11yCurrentText="Results Pagination - Page 2">
    <EbayPaginationItem href="#" type="previous" disabled/>
    <EbayPaginationItem href="#" current>item 1</EbayPaginationItem>
    <EbayPaginationItem href="#">item 2</EbayPaginationItem>
    <EbayPaginationItem href="#">item 3</EbayPaginationItem>
    <EbayPaginationItem href="#" type="next"/>
</EbayPagination>

EbayPagination Attributes

Name	Type	Stateful	Description
a11yPreviousText	String	No	a11y text for previous arrow button
a11yNextText	String	No	a11y text for next arrow button
a11yCurrentText	String	No	Description for the current page (e.g. Results of Page 1)
variant	String	No	Either show-last, or show-range (default). If show-last then will show the last page always and will put … between the last visible range and the last page. … and the last page will take up two items in the range. … will be hidden when the range to the last item is fully visible.
fluid	Boolean	No	Will fill all available horizontal space. Horizontal space will be distributed around each item as necessary.

EbayPagination Events

Event	Data	Description
onPrevious	(Event)	clicked previous arrow button
onNext	(Event)	clicked next arrow button
onSelect	(Event, { value, index })	page selected clicked

EbayPaginationItem Tag

EbayPaginationItem Usage

<EbayPaginationItem>1</EbayPaginationItem>

EbayPaginationItem Attributes

Name	Type	Stateful	Description
disabled	Boolean	No	Previous/next button is disabled or not
href	String	No	for link that looks like a menu-item; omitting the href will switch to a button
current	Boolean	No	the current page
type	String	No	"previous", "next" or "page"(default). To specify if the information entered is for the previous or next arrow button or a page. If the `type='previous

Notes:

• If you want to have client side or ajax based navigation then you should omit the href attribute on each item. This will cause each item to be <button> instead of an <a>.