Pagination 翻页器

Pagination 翻页器

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

在有大量内容展现需要进行分页加载处理的时候。

API

Pagination

参数	说明	类型	默认值
size	分页组件大小可选值:'small', 'medium', 'large'	Enum	'medium'
type	分页组件类型可选值:'normal', 'simple', 'mini'	Enum	'normal'
shape	前进后退按钮样式可选值:'normal', 'arrow-only', 'arrow-prev-only', 'no-border'	Enum	'normal'
current	（受控）当前页码	Number	-
defaultCurrent	（非受控）初始页码	Number	1
onChange	页码发生改变时的回调函数签名:Function(current: Number, e: Object) => void参数:current: {Number} 改变后的页码数e: {Object} 点击事件对象	Function	() => {}
total	总记录数	Number	100
totalRender	总数的渲染函数签名:Function(total: Number, range: Array) => void参数:total: {Number} 总数range: {Array} 当前数据在总数中的区间	Function	-
pageShowCount	页码显示的数量，更多的使用…代替	Number	5
pageSize	一页中的记录数	Number	10
pageSizeSelector	每页显示选择器类型可选值:false, 'filter', 'dropdown'	Enum	false
pageSizeList	每页显示选择器可选值	Array<Number>/Array<Object>	5, 10, 20
pageNumberRender	自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染签名:Function(index: Number) => ReactNode参数:index: {Number} 分页的页码，从1开始返回值:{ReactNode} 返回渲染结果	Function	index => index
pageSizePosition	每页显示选择器在组件中的位置可选值:'start', 'end'	Enum	'start'
useFloatLayout	存在每页显示选择器时是否使用浮动布局	Boolean	false
onPageSizeChange	每页显示记录数量改变时的回调函数签名:Function(pageSize: Number) => void参数:pageSize: {Number} 改变后的每页显示记录数	Function	() => {}
hideOnlyOnePage	当分页数为1时，是否隐藏分页器	Boolean	false
showJump	type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域	Boolean	true
link	设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：http://xxx.com/{page}	String	-
popupProps	弹层组件属性，透传给Popup	Object	-

ARIA and KeyBoard

按键	说明
Tab	切换页数
Space	按下按钮
Enter	按下按钮

代码示例

非受控分页

非受控分页，是指分页组件的状态由自己维护，组件值的改变可以通过 onChange 事件通知父组件，默认值由 defaultCurrent 初始化。

查看源码在线预览

import { Pagination } from '@alifd/next';
const change = function(value) {
    console.log(value);
};
ReactDOM.render(
    <Pagination defaultCurrent={2} onChange={change} />,
    mountNode
);

受控分页

受控分页，是指分页组件的状态由父组件维护，组件自身只负责渲染其父组件传递的值，父组件通过 current 属性传递当前的值。

查看源码在线预览

import { Pagination } from '@alifd/next';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 2
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(current) {
        this.setState({
            current
        });
    }
    render() {
        return (
            <Pagination current={this.state.current} onChange={this.handleChange} />
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

分页尺寸

可以通过指定 size 属性来设置分页的尺寸。

查看源码在线预览

import { Pagination } from '@alifd/next';
ReactDOM.render(
    <div>
        <h3>small</h3>
        <Pagination defaultCurrent={2} size="small" />
        <h3>medium</h3>
        <Pagination defaultCurrent={2} size="medium" />
        <h3>large</h3>
        <Pagination defaultCurrent={2} size="large" />
    </div>,
    mountNode
);

分页类型

可以通过指定 type 属性来设置分页的类型。

查看源码在线预览

import { Pagination } from '@alifd/next';
ReactDOM.render(
    <div>
        <h3>normal</h3>
        <Pagination defaultCurrent={2} />
        <h3>simple</h3>
        <Pagination defaultCurrent={2} type="simple" />
        <h3>mini</h3>
        <Pagination defaultCurrent={2} type="mini" />
    </div>,
    mountNode
);

前进后退按钮只显示箭头

可以通过指定 shape 属性来设置前进后退按钮箭头的显示方式。

查看源码在线预览

import { Pagination } from '@alifd/next';
ReactDOM.render(
    <div>
        <h3>normal</h3>
        <Pagination defaultCurrent={2} />
        <h3>arrow-only</h3>
        <Pagination defaultCurrent={2} shape="arrow-only" />
        <h3>arrow-prev-only</h3>
        <Pagination defaultCurrent={2} shape="arrow-prev-only" />
        <h3>no-border</h3>
        <Pagination defaultCurrent={2} shape="no-border" type="simple" />
    </div>,
    mountNode
);

.next-pagination + .next-pagination {
    margin-top: 20px;
}

每页显示

可以通过设置 pageSize 属性来指定每页显示的数量。可以通过设置 pageSizeSelector 属性来指定是否显示每页数量选择的部件以及部件形状。可以通过设置 pageSizeList 属性来指定每页显示数量可选的值。可以通过设置 pageSizePosition 属性来指定每页显示数量选择的部件显示在整个组件的开始位置还是结束位置。可以通过设置 onPageSizeChange 属性来指定每页显示的数量变化时的回调函数。

查看源码在线预览

import { Pagination } from '@alifd/next';
const handlePageSizeChange = size => console.log(size);
ReactDOM.render(
    <div>
        <h3>To hidden per page size selector</h3>
        <Pagination pageSizeSelector={false} />
        <h3>Type per page size selector of is dropdown，and as for the tail of the entire component</h3>
        <Pagination pageSizeSelector="dropdown" pageSizePosition="end" onPageSizeChange={handlePageSizeChange} />
        <h3>Filter type per page size selector, and use floating layout</h3>
        <Pagination pageSizeSelector="filter" onPageSizeChange={handlePageSizeChange} useFloatLayout />
    </div>,
    mountNode
);

显示总数

分页组件默认不显示总数，你可以通过 totalRender 自定义总数的显示结果。

查看源码在线预览

import { Pagination } from '@alifd/next';
const total = 50;
ReactDOM.render(
    <Pagination className="custom-pagination" total={total} totalRender={total => `Total: ${total}`} />,
    mountNode
);

.custom-pagination {
    display: inline-block;
    margin-left: 10px;
}

分页按钮链接

可以通过指定 link 属性来设置页码按钮的跳转链接，方便 SEO，link 属性的值为一个包含 {page} 的模板字符串，Pagination 组件会将该占位符替换为具体的页码数字。

查看源码在线预览

import { Pagination } from '@alifd/next';
const format = `${window.location.href}#/{page}`;
ReactDOM.render(
    <Pagination defaultCurrent={2} link={format} />,
    mountNode
);

配合 react-router 使用

单页应用场景下，Pagination 组件可以使用外部跳转的方法来实现单页内部跳转。

查看源码在线预览

import { Pagination } from '@alifd/next';
import { hashHistory } from 'react-router';
function handleChange(page) {
    hashHistory.push(page.toString());
}
ReactDOM.render(
    <Pagination defaultCurrent={2} onChange={handleChange} />,
    mountNode
);

每页显示

使用popupProps prop中的align属性设置下拉位置。

查看源码在线预览

import { Pagination } from '@alifd/next';
const handlePageSizeChange = size => console.log(size);
const containerStyle = {
    height: '300px',
    padding: 0,
    width: '100%',
};
const boxStyle = {
  overflow: 'auto',
  position: 'relative',
  width: '100%',
  height: '200px',
  border: '1px solid black'
};
const tempStyle = {
    height: '200px',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
};
const parentStyle = {
    display: 'flex',
    'justify-content': 'space-between',
};
const popupProps = {
    align: 'bl tl'
};
ReactDOM.render(
    <div>
        <h3>default align - 'tl bl'</h3>
        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
        <h3>custom align - 'bl tl'</h3>
        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
        <h3>Inside parent with "overlflow: auto"</h3>
        <div style={containerStyle}>
            <div style={boxStyle}>
                <div style={tempStyle}>scroll down to see the example</div>
                <div style={parentStyle}>
                    <div>
                        <h3>default align - 'tl bl'</h3>
                        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
                    </div>
                    <div>
                        <h3>custom align - 'bl tl'</h3>
                        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
                    </div>
                </div>
            </div>
        </div>
    </div>,
    mountNode
);

Pagination 翻页器

安装方法

开发指南

何时使用

ARIA and KeyBoard

代码示例

相关区块

暂无相关区块