2019-07-18 13:40:50 +00:00
|
|
|
# Paging
|
|
|
|
|
|
2019-11-21 13:26:09 +00:00
|
|
|
Paging is used to navigate med content pages
|
2019-07-18 13:40:50 +00:00
|
|
|
|
2019-11-21 13:26:09 +00:00
|
|
|
### Usage
|
2019-07-18 13:40:50 +00:00
|
|
|
|
|
|
|
|
```js
|
2022-07-22 19:01:25 +00:00
|
|
|
import Paging from "@docspace/components/paging";
|
2019-11-21 13:26:09 +00:00
|
|
|
```
|
2019-07-18 13:40:50 +00:00
|
|
|
|
2019-11-21 13:26:09 +00:00
|
|
|
```jsx
|
|
|
|
|
<Paging
|
|
|
|
|
previousLabel="Previous"
|
|
|
|
|
nextLabel="Next"
|
|
|
|
|
selectedPageItem={{ label: "1 of 1" }}
|
|
|
|
|
selectedCountItem={{ label: "25 per page" }}
|
|
|
|
|
previousAction={() => console.log("Prev")}
|
|
|
|
|
nextAction={() => console.log("Next")}
|
|
|
|
|
openDirection="bottom"
|
2020-10-16 13:16:01 +00:00
|
|
|
onSelectPage={(a) => console.log(a)}
|
|
|
|
|
onSelectCount={(a) => console.log(a)}
|
2019-08-05 12:53:32 +00:00
|
|
|
/>
|
2019-07-18 13:40:50 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-21 13:26:09 +00:00
|
|
|
### Properties
|
|
|
|
|
|
2019-12-03 12:25:17 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------------------- | :------------: | :------: | :-------------: | :--------: | ---------------------------------------- |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `countItems` | `array` | - | - | - | Items per page combo box items |
|
|
|
|
|
| `disableNext` | `bool` | - | - | `false` | Set next button disabled |
|
|
|
|
|
| `disablePrevious` | `bool` | - | - | `false` | Set previous button disabled |
|
|
|
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
|
|
|
| `nextAction` | `function` | - | - | - | Action for next button |
|
|
|
|
|
| `nextLabel` | `string` | - | - | `Next` | Label for next button |
|
|
|
|
|
| `openDirection` | `string` | - | `top`, `bottom` | `bottom` | Indicates opening direction of combo box |
|
|
|
|
|
| `pageItems` | `array` | - | - | - | Paging combo box items |
|
|
|
|
|
| `previousAction` | `function` | - | - | - | Action for previous button |
|
|
|
|
|
| `previousLabel` | `string` | - | - | `Previous` | Label for previous button |
|
|
|
|
|
| `selectedCountItem` | `object` | - | - | - | Initial value for countItems |
|
|
|
|
|
| `selectedPageItem` | `object` | - | - | - | Initial value for pageItems |
|
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
