@highlight-ui/pagination NPM | npm.io

3.3.5 • Published 1 year ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 year ago

@highlight-ui/pagination

Using npm:

npm install @highlight-ui/pagination

Using yarn:

yarn add @highlight-ui/pagination

Using pnpm:

pnpm install @highlight-ui/pagination

In your (S)CSS file:

@import url('@highlight-ui/pagination');

Once the package is installed, you can import the library:

import { Pagination } from '@highlight-ui/pagination';

Usage

import React from 'react';
import { Pagination } from '@highlight-ui/pagination';

export default function PaginationExample() {
  return (
    <Pagination
      offset={0}
      total={100}
      limit={10}
      maxItems={5}
      onChange={handleChange}
    />
  );
}

Props 📜

Prop	Type	Required	Default	Description
`limit`	`number`	Yes		How many items are shown on the page
`offset`	`number`	Yes		Used to calculate current page
`total`	`number`	Yes		Total number of items
`onChange`	`(offset: number) => void`	Yes		Callback that is invoked when the page is selected or navigation buttons are clicked.
`firstPageIconName`	`string`	No	`angle-double-left`	Icon for "go to the first page" button
`lastPageIconName`	`string`	No	`angle-double-right`	Icon for "go to the last page" button
`maxItems`	`number`	No	`0`	How many page buttons are shown
`nextPageIconName`	`string`	No	`angle-right`	Icon for "go to the next page" button
`prevPageIconName`	`string`	No	`angle-left`	Icon for "go to the previous page" button
`className`	`string`	No		Allows providing a custom class name

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.

@highlight-ui/icon @highlight-ui/typography @highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 personio-componants @zalastax/nolb-_hig

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago