@pmwcs/pagination v1.1.0

Pagination (PMWCS Addon)

The Pagination component enables the user to select a specific page from a range of pages.

• Module @pmwcs/pagination
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/pagination/styles';
  • Or include stylesheets
    • '@pmwcs/icon-button/styles'
    • '@pmwcs/pagination/pagination.css'

Uncontrolled

<Pagination onChange={(evt, page) => {}} />
<Pagination count={3} onChange={(evt, page) => {}} defaultPage={1} />
<Pagination count={5} onChange={(evt, page) => {}} defaultPage={3} showFirstButton showLastButton />

Controlled

function MyPagination ({ count }) {
  const [page, setPage] = useState(1)

  return (
    <Pagination
      page={page}
      count={count}
      onChange={(evt, page) => setPage(page)}
    />
  )
}

Variants

<Pagination primary count={10}  />
<Pagination secondary count={10} />
<Pagination disabled count={10} />
<Pagination rounded count={3} />

Pagination

Enables the user to select a specific page from a range of pages.

Props

PaginationItem

Pagination element to select a specific page.