# @beisen-platform/paging

> 平台分页组件

Latest version **1.1.10** (published 2019-10-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/paging
pnpm add @beisen-platform/paging
yarn add @beisen-platform/paging
bun add @beisen-platform/paging
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.10 |
| Published | 2019-10-10 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 407.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/paging
- npm.io page: https://npm.io/package/@beisen-platform/paging

## Dependencies (5)

- [commitizen](https://npm.io/package/commitizen.md) ^2.10.1
- [cz-customizable](https://npm.io/package/cz-customizable.md) ^5.2.0
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen-platform/dropdown-button](https://npm.io/package/@beisen-platform/dropdown-button.md)

## Recent versions

- 1.1.10 (latest) — 2019-10-10
- 1.1.7 — 2019-09-02
- 1.1.6 — 2019-06-11
- 1.1.5 — 2019-05-31
- 1.1.4-rc.4 — 2019-05-17
- 1.1.4-rc.3 — 2019-04-30
- 1.1.4-rc.2 — 2019-04-22
- 1.1.4-rc.1 — 2019-04-22
- 1.1.4 — 2019-04-18
- 1.1.3 — 2019-04-17
- 1.1.2 — 2019-04-17
- 1.1.1 — 2019-04-15
- 1.1.0 — 2019-04-14
- 1.0.21 — 2019-04-12
- 1.0.19 — 2019-04-12
- … 18 more at https://npm.io/package/@beisen-platform/paging/versions

## README

# paging

## 参数

### props
```javascript
const props = {
  hidden: false,    // 是否渲染 默认false
  total: 20,        // 总页数
  currentPage: 1,   // 当前页数
  visiblePages: 9,  // 显示的页数 min = 5
  capacity: 10,     // 每页条数，页面容量
  capacityList: [15, 30, 60, 100], //可选的页面容量
  isShowDropdown: true,
  autoDirection:false,  //DropDownButton的autoDirection属性
  direction:false,      //DropDownButton的direction属性
  hasJumpTo:false,      //是否显示跳转至
  onIndexChange: index => console.log(index),     // 页数变化
  onCapacityChange: index => console.log(index),  //页面容量变化
  focusCallBack: event => console.log(event),     // input 
  blurCallBack: event => console.log(event),      // input
  changeCallBack: event => console.log(event)     // input
}
```

### PropTypes
```javascript
Paging.propTypes = {
  hidden: PropTypes.bool,
  total: PropTypes.number.isRequired,
  currentPage: PropTypes.number.isRequired,
  visiblePages: PropTypes.number.isRequired,
  capacity: PropTypes.number.isRequired,
  capacityList: PropTypes.array.isRequired,
  onIndexChange: PropTypes.func.isRequired,
  onCapacityChange: PropTypes.func.isRequired
}
```

## 使用方法

1.安装npm组件包

```
npm install @beisen/paging --save-dev
```

2.引用组件

  ```javascript
import Paging from "@beisen/paging"
  ```
  
3.传入参数

  该参数为上述参数，传入方式使用: {...参数}

```javascript

class Paging extends Component {
  render() {
      const options = {
        hidden: false, // 是否渲染 默认false
        total: 20, //总页数
        currentPage: 1, // 当前页数
        visiblePages: 9, // 显示的页数 min = 5
        capacity: 10, // 每页条数，页面容量
        capacityList:[15,30,60,100],//可选的页面容量
        onIndexChange: index => console.log(index), // 页数变化
        onCapacityChange: index => console.log(index)  //页面容量变化
      };
      return <Paging {...options} />
  }
}

React.render(<Paging />, document.getElementById('content'))

```

---
_Source: https://npm.io/package/@beisen-platform/paging · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._