Neurologically Paralyzing Mouseovers

npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

bee-pagination

2.0.10 • Public • Published

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 false
noBorder 不显示按钮边框 bool false
size 按钮大小oneOf:lg,sm,'' string ''
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

install

npm i bee-pagination

Downloadsweekly downloads

407

version

2.0.10

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability