# bee-pagination

> pagination ui component for react

Latest version **3.0.7** (published 2021-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install bee-pagination
pnpm add bee-pagination
yarn add bee-pagination
bun add bee-pagination
```

## 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 | 3.0.7 |
| Published | 2021-07-05 |
| First published | 2016-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 8 |
| Unpacked size | 136.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | yonyou |
| Maintainers | wangjings123, diozhu, cnkvkens, yonyoufed, jonyw, guoyongfeng, kvkens, whizbz, npm_yx, bjyxszd, tinper-bot, houjitong, gaox2025f, gcht163, ahua52 |
| Keywords | react, react-component, react-pagination, iuap-design, neoui-react, pagination |

## Links

- npm: https://www.npmjs.com/package/bee-pagination
- Repository: https://github.com/tinper-bee/bee-pagination
- Issues: https://github.com/tinper-bee/bee-pagination/issues
- npm.io page: https://npm.io/package/bee-pagination

## Dependencies (8)

- [omit.js](https://npm.io/package/omit.js.md) ^1.0.2
- [bee-icon](https://npm.io/package/bee-icon.md) latest
- [bee-button](https://npm.io/package/bee-button.md) latest
- [bee-locale](https://npm.io/package/bee-locale.md) 0.0.9
- [bee-select](https://npm.io/package/bee-select.md) ^2.0.32
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [react-cookies](https://npm.io/package/react-cookies.md) ^0.1.1
- [tinper-bee-core](https://npm.io/package/tinper-bee-core.md) latest

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.7 (latest) — 2021-07-05
- 2.0.11-alpha.0 (alpha) — 2019-10-11
- 2.0.9-beta.0 (beta) — 2019-08-26
- 3.0.6 — 2021-06-25
- 3.0.5 — 2021-03-23
- 2.0.18-beta.0 — 2021-03-23
- 3.0.4 — 2020-10-30
- 3.0.3 — 2020-09-09
- 3.0.2 — 2020-08-13
- 3.0.1 — 2020-08-11
- 3.0.0 — 2020-08-06
- 2.0.18 — 2020-08-04
- 2.0.17 — 2020-04-24
- 2.0.16 — 2020-03-09
- 2.0.15 — 2020-02-05
- … 48 more at https://npm.io/package/bee-pagination/versions

## README

# bee-pagination
[![npm version](https://img.shields.io/npm/v/bee-pagination.svg)](https://www.npmjs.com/package/bee-pagination)
[![Build Status](https://img.shields.io/travis/tinper-bee/bee-pagination/master.svg)](https://travis-ci.org/tinper-bee/bee-pagination)
[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-pagination/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-pagination?branch=master)

用于内容过多，分页显示内容

Pagination组件内部集成了子组件PaginationButton.PaginationButton并不暴露给用户。

## 使用

使用单独的bee-Pagination包
#### 组件引入
先进行下载bee-Pagination包
```
npm install --save bee-pagination
```
组件调用
```js
import Pagination from 'bee-pagination';
React.render(<div>
   <Pagination
        prev
        next
        first
        last
        ellipsis
        boundaryLinks
        items={20}
        maxButtons={5}
        activePage={this.state.activePage}
        onSelect={this.handleSelect.bind(this)} />
</div>, document.getElementById('target'));
```
#### 样式引入
- 可以使用link引入dist目录下bee-pagination.css
```
<link rel="stylesheet" href="./node_modules/build/Pagination.css">
```
- 可以在js中import样式
```js
import "./node_modules/src/Pagination.scss"
//或是
import "./node_modules/build/Pagination.css"
```

### API

|参数|说明|类型|默认值|
|:---|:----|:---|:------|
|items|总页数|number|1|
|activePage|哪一页是激活状态|number|1|
|onSelect|切换页的方法|func |() => {}|
|maxButtons|显示最多页数按钮|number|0|
|prev|显示上一页按钮|bool|false|
|next|显示下一页按钮|bool|false|
|first|显示第一页按钮|bool|false|
|last|显示最后一页按钮|bool|last|
|ellipsis|显示省略按钮|bool|false|
|boundaryLinks|显示边界按钮|bool|false|
|gap|按钮之间有间隔|bool|true|
|noBorder|不显示按钮边框|bool|false|
|size|分页按钮大小(lg md sm)|string|'sm'|
|showJump|是否显示跳页选择|bool|false(为了兼容老版本)|
|onDataNumSelect|选择每页多少条的回调函数|func|() => {}|
|dataNumSelect|每页多少条的下拉选择Option内容|array|['5','10','15','20']|
|dataNum|下拉选择的设定值的index|num|1|
|total|一共多少条|num|1|
|disabled|pagination不可用，不可点击|bool|false|
|confirmBtn|渲染确认按钮dom的方法|func|() => {}|

#### 开发调试

```sh
$ git clone https://github.com/tinper-bee/bee-pagination
$ cd bee-pagination
$ npm install
$ npm run dev
```

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