Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

pagination

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
798
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
76 KB
subject
Called on change of an active page.
1 contributor
Use pagination in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.pagination
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Called on change of an active page.

Pagination ()

A component to render a pagination.

Called on click.

Called on key down.

PaginationItem ()

An item of a pagination.

Properties
NameTypeDefault valueDescription
aria-label
string'Pagination Navigation'

A pagination item can have an aria label.

defaultActivePage
number | string

Initial activePage value.

activePage
number | string

Index of the currently active page.

boundaryRange
number | string1

Number of always visible pages at the beginning and end.

disabled
bool

A pagination can be disabled.

ellipsisItem
custom'...'

A shorthand for PaginationItem.

firstItem
custom{ 'aria-label': 'First item', content: '«', }

A shorthand for PaginationItem.

lastItem
custom{ 'aria-label': 'Last item', content: '»', }

A shorthand for PaginationItem.

nextItem
custom{ 'aria-label': 'Next item', content: '⟩', }

A shorthand for PaginationItem.

pageItem
custom{}

A shorthand for PaginationItem.

prevItem
custom{ 'aria-label': 'Previous item', content: '⟨', }

A shorthand for PaginationItem.

onPageChange
function

React’s original SyntheticEvent.

siblingRange
number | string1

Number of always visible pages before and after the current one.

totalPages
number | string

Total number of pages.

active
bool

A pagination item can be active.

disabled
bool

A pagination item can be disabled.

onClick
function

React’s original SyntheticEvent.

onKeyDown
function

React’s original SyntheticEvent.

type
'ellipsisItem' | 'firstItem' | 'prevItem' | 'pageItem' | 'nextItem' | 'lastItem'

A pagination should have a type.