bee-pagination

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

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

使用

使用单独的bee-Pagination包

组件引入

先进行下载bee-Pagination包

npm install --save bee-pagination

组件调用

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样式

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|() => {}|

开发调试

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