Pagination

A component to navigate through paginated content.

Usage

import { Box, Main, Pagination } from '@aragon/ui'

function App() {
  const [selected, setSelected] = useState(0)
  return (
    <Main>
      <Box>
        <Pagination pages={20} selected={selected} onChange={setSelected} />
      </Box>
    </Main>
  )
}

Demonstration

Props

onChange

TYPE	DEFAULT VALUE
Function: (item: Number) -> *	None

Gets called when the selected page changes. Takes the new index as a unique parameter.

pages

TYPE	DEFAULT VALUE
Number	0

The total amount of pages.

selected

TYPE	DEFAULT VALUE
Number	0

The currently selected page (zero based numbering).

touchMode

TYPE	DEFAULT VALUE
Boolean	false

When true, adapts the component to touch screens by making the targets bigge