<Pagination> Component

<Pagination> is a list of huge page numbers with limited displayed list.

Here the demo:

Preview

Installing <Pagination> Component

There are 2 ways to install <Pagination> component into your react app project:

  • Install the Specific Package of <Pagination> Component
  • Install the Whole Reusable-UI Component Pack, including the <Pagination> Component

itemsLimit Property

Specifies a positive number to limit the number of displayed <ListItem>s of the <Pagination>.

The <Pagination> should have exactly one of <ListItem active={true}> in order to the <Pagination> display the correct position of limited displayed list.

prevItems Property

Specifies the children to be inserted before the limited displayed list appears.

This property is useful to place a <NavPrevItem> component or <YourCustomButton> component.

nextItems Property

Specifies the children to be inserted after the limited displayed list appears.

This property is useful to place a <NavNextItem> component or <YourCustomButton> component.

Variant Properties

The alternative appearances of the <Pagination> layout without changing the <Pagination>'s functionality.

orientation Property

Sets the orientation of the <Pagination>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview

Show code

size Property

Defines the alternative size of the <Pagination>.

You can set the size individually for each <ListItem>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <Pagination>.

You can set the theme individually for each <ListItem>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <Pagination>.

You can set the gradient individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Pagination>.

You can set the outlined individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Pagination>.

You can set the mild individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

State Properties

The conditions of the <Pagination> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <Pagination>.

You can set the enabled individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritEnabled Property

Influences the <Pagination>'s disabled state by <ancestor enabled={false}>.

You can set the inheritEnabled individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

Component Properties

Overwrites the internal (sub) components used as the composition of <Pagination> component.

navComponent Property

Overwrites the internal <Nav> component used as the composition of <Pagination> component.

<Pagination navComponent={
    <MyCustomNav />
} />