Nukem's Possible Manifestation

    bee-pagination

    3.0.7 • 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 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

    Install

    npm i bee-pagination

    DownloadsWeekly Downloads

    396

    Version

    3.0.7

    License

    MIT

    Unpacked Size

    140 kB

    Total Files

    20

    Last publish

    Collaborators

    • wangjings123
    • diozhu
    • cnkvkens
    • yonyoufed
    • jonyw
    • guoyongfeng
    • kvkens
    • whizbz
    • npm_yx
    • bjyxszd
    • tinper-bot
    • houjitong
    • gaox2025f
    • gcht163
    • ahua52