bee-pagination-ac
pagination ui component for react
Last updated 3 months ago by littlefox9527 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-pagination-ac 
SYNC missed versions from official npm registry.

bee-pagination

npm version Build Status Coverage Status

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

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

Current Tags

  • 0.0.1                                ...           latest (3 months ago)

1 Versions

  • 0.0.1                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (9)
Dev Dependencies (13)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |