| 1 | # bee-pagination
|
| 2 | [](https://www.npmjs.com/package/bee-pagination)
|
| 3 | [](https://travis-ci.org/tinper-bee/bee-pagination)
|
| 4 | [](https://coveralls.io/github/tinper-bee/bee-pagination?branch=master)
|
| 5 |
|
| 6 | 用于内容过多，分页显示内容
|
| 7 |
|
| 8 | Pagination组件内部集成了子组件PaginationButton.PaginationButton并不暴露给用户。
|
| 9 |
|
| 10 | ## 使用
|
| 11 |
|
| 12 | 使用单独的bee-Pagination包
|
| 13 | #### 组件引入
|
| 14 | 先进行下载bee-Pagination包
|
| 15 | ```
|
| 16 | npm install --save bee-pagination
|
| 17 | ```
|
| 18 | 组件调用
|
| 19 | ```js
|
| 20 | import Pagination from 'bee-pagination';
|
| 21 | React.render(<div>
|
| 22 | <Pagination
|
| 23 | prev
|
| 24 | next
|
| 25 | first
|
| 26 | last
|
| 27 | ellipsis
|
| 28 | boundaryLinks
|
| 29 | items={20}
|
| 30 | maxButtons={5}
|
| 31 | activePage={this.state.activePage}
|
| 32 | onSelect={this.handleSelect.bind(this)} />
|
| 33 | </div>, document.getElementById('target'));
|
| 34 | ```
|
| 35 | #### 样式引入
|
| 36 | - 可以使用link引入dist目录下bee-pagination.css
|
| 37 | ```
|
| 38 | <link rel="stylesheet" href="./node_modules/build/Pagination.css">
|
| 39 | ```
|
| 40 | - 可以在js中import样式
|
| 41 | ```js
|
| 42 | import "./node_modules/src/Pagination.scss"
|
| 43 | //或是
|
| 44 | import "./node_modules/build/Pagination.css"
|
| 45 | ```
|
| 46 |
|
| 47 | ### API
|
| 48 |
|
| 49 | |参数|说明|类型|默认值|
|
| 50 | |:---|:----|:---|:------|
|
| 51 | |items|总页数|number|1|
|
| 52 | |activePage|哪一页是激活状态|number|1|
|
| 53 | |onSelect|切换页的方法|func |() => {}|
|
| 54 | |maxButtons|显示最多页数按钮|number|0|
|
| 55 | |prev|显示上一页按钮|bool|false|
|
| 56 | |next|显示下一页按钮|bool|false|
|
| 57 | |first|显示第一页按钮|bool|false|
|
| 58 | |last|显示最后一页按钮|bool|last|
|
| 59 | |ellipsis|显示省略按钮|bool|false|
|
| 60 | |boundaryLinks|显示边界按钮|bool|false|
|
| 61 | |gap|按钮之间有间隔|bool|false|
|
| 62 | |noBorder|不显示按钮边框|bool|false|
|
| 63 | |size|按钮大小oneOf:lg,sm,''|string|''|
|
| 64 | |showJump|是否显示跳页选择|bool|false(为了兼容老版本)|
|
| 65 | |onDataNumSelect|选择每页多少条的回调函数|func|() => {}|
|
| 66 | |dataNumSelect|每页多少条的下拉选择Option内容|array|['5','10','15','20']|
|
| 67 | |dataNum|下拉选择的设定值的index|num|1|
|
| 68 | |total|一共多少条|num|1|
|
| 69 | |disabled|pagination不可用，不可点击|bool|false|
|
| 70 | |btnType|pagination确认按钮的样式属性集合，具体参考组件Button|Object|{shape:'border'}|
|
| 71 |
|
| 72 | #### 开发调试
|
| 73 |
|
| 74 | ```sh
|
| 75 | $ git clone https://github.com/tinper-bee/bee-pagination
|
| 76 | $ cd bee-pagination
|
| 77 | $ npm install
|
| 78 | $ npm run dev
|
| 79 | ```
|