简体中文

分页器

分页器组件。

分页器组件可以让你更加有效地管理列表。

基础
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/9
 */
import React, {Component} from 'react';
import {Pagination} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * Use the pagination to enhance your list view.
 *
 * Like lots of pagination, hana provides some base properties to make sure this component work normally:
 * `total`, `pageSize`, `length`, `offset` and `current`,
 * and a callback `onSelect` will be called when a new page is selected.
 *
 * In addition, this pagination could be configured to enable more functions:
 * working with a quick-jumper with property `withQuickJumper`, she allows you to jump to any page quickly;
 * working with a border-jumper with property `withBorderJumper`, she allows you to jump to the first or last page quickly.
 *
 * @cn
 * 基础
 *
 * 使用分页器来使你的列表展示更加合理。
 *
 * 与大多分页器一样,hana提供了一些基本的属性来维持组件基础的运转:`total`、`pageSize`、`length`、`offset` 和 `current`。
 * 而当页面被选择时,一个回调函数`onSelect`将会被调用,其参数是被选择的页码。
 *
 * 除此之外,hana还提供了几种常用的模式。
 * 使用`withQuickJumper`属性可以调出一个快速跳转器,用于跳转到指定的页码;
 * 使用`withBorderJumper`属性可以调出一个边界跳转器,用于快速跳转到首页或者尾页。
 */
export default class ExampleBase extends Component {
  state = {
    current: 1,
    current1: 4,
    current2: 0,
    current3: 1
  };

  render() {
    const {
      current,
      current1,
      current2,
      current3
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={
            <p>Normal mode, page: {current}</p>
          }
          cn={
            <p>普通模式,页码:{current}</p>
          }
        >
          <Pagination
            total={100000}
            pageSize={10}
            length={7}
            offset={1}
            current={current}
            onSelect={page => this.setState({current: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>
        <ExampleBlock
          en={
            <p>With border-jumper mode, page: {current1}</p>
          }
          cn={
            <p>带有边界跳转器,页码:{current1}</p>
          }
        >
          <Pagination
            total={1200000}
            pageSize={9}
            length={8}
            offset={0}
            current={current1}
            onSelect={page => this.setState({current1: page})}
            withBorderJumper
          />
        </ExampleBlock>
        <ExampleBlock
          en={
            <p>With quick-jumper mode, page: {current2}</p>
          }
          cn={
            <p>带有快速跳转器,页码:{current2}</p>
          }
        >
          <Pagination
            total={900000}
            pageSize={8}
            length={6}
            offset={0}
            current={current2}
            onSelect={page => this.setState({current2: page})}
            withQuickJumper
          />
        </ExampleBlock>
        <ExampleBlock
          en={
            <p>With quick-jumper and last-jumper mode, page: {current3}</p>
          }
          cn={
            <p>带有边界跳转器和快速跳转器,页码:{current3}</p>
          }
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            offset={1}
            current={current3}
            onSelect={page => this.setState({current3: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>
      </div>
    );
  }
}

使用分页器来使你的列表展示更加合理。

与大多分页器一样,hana提供了一些基本的属性来维持组件基础的运转:totalpageSizelengthoffsetcurrent。 而当页面被选择时,一个回调函数onSelect将会被调用,其参数是被选择的页码。

除此之外,hana还提供了几种常用的模式。 使用withQuickJumper属性可以调出一个快速跳转器,用于跳转到指定的页码; 使用withBorderJumper属性可以调出一个边界跳转器,用于快速跳转到首页或者尾页。

普通模式,页码:1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10000
  • Go

带有边界跳转器,页码:4

  • 0
  • ...
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ...
  • 133333

带有快速跳转器,页码:0

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • Go

带有边界跳转器和快速跳转器,页码:1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10
  • Go

显示类型
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/10
 */
import React, {Component} from 'react';
import {Pagination} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 *
 * @en
 * View
 *
 * Property `view` decides the type of component will be showed,
 * it could be `simple`, `box` and `circle`.
 *
 * @cn
 * 显示类型
 *
 * `view`属性用于决定组件显示的基本样式,有`simple`、`box`和`circle`三种。
 */
export default class ExampleView extends Component {
  state = {
    current: 1,
    current1: 0,
    current2: 0
  };

  render() {
    const {
      current,
      current1,
      current2
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Box, page: {current}</p>
          )}
          cn={(
            <p>Box,页数:{current}</p>
          )}
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            current={current}
            view={'box'}
            onSelect={page => this.setState({current: page})}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Circle, page: {current1}</p>
          )}
          cn={(
            <p>Circle,页数:{current1}</p>
          )}
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            current={current1}
            view={'circle'}
            onSelect={page => this.setState({current1: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Simple, page: {current2}</p>
          )}
          cn={(
            <p>Simple,页数:{current2}</p>
          )}
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            current={current2}
            view={'simple'}
            onSelect={page => this.setState({current2: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>
      </div>
    );
  }
}

view属性用于决定组件显示的基本样式,有simpleboxcircle三种。

Box,页数:1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Circle,页数:0

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10
  • Go

Simple,页数:0

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10
  • Go

尺寸
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/10
 */
import React, {Component} from 'react';
import {Pagination} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Size
 *
 * For different scenes, hana provides three preset sizes defined by property `size`:
 * `small`, `middle` and `large`.
 *
 * @cn
 * 尺寸
 *
 * 针对不同场景,hana提供了一个属性`size`来定义尺寸的大小,现在有`small`、`middle`和`large`三种。
 */
export default class ExampleView extends Component {
  state = {
    current: 1,
    current1: 0,
    current2: 0
  };

  render() {
    const {
      current,
      current1,
      current2
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Small, page: {current}</p>
          )}
          cn={(
            <p>小尺寸,页码:{current}</p>
          )}
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            current={current}
            size={'small'}
            onSelect={page => this.setState({current: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Middle, page: {current1}</p>
          )}
          cn={(
            <p>中尺寸,页码:{current1}</p>
          )}
        >
          <Pagination
            total={100}
            pageSize={10}
            length={7}
            current={current1}
            size={'middle'}
            onSelect={page => this.setState({current1: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Large, page: {current2}</p>
          )}
          cn={(
            <p>大尺寸,页码:{current2}</p>
          )}
        >
          <Pagination
            total={1000000}
            pageSize={10}
            length={7}
            current={current2}
            size={'large'}
            onSelect={page => this.setState({current2: page})}
            withBorderJumper
            withQuickJumper
          />
        </ExampleBlock>
      </div>
    );
  }
}

针对不同场景,hana提供了一个属性size来定义尺寸的大小,现在有smallmiddlelarge三种。

小尺寸,页码:1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10
  • Go

中尺寸,页码:0

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 10
  • Go

大尺寸,页码:0

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ...
  • 100000
  • Go

属性说明

属性名 类型 默认值 说明
total number 0 数据的总数。
pageSize number 10 每页的数据条数。
length number 8 被显示的最大分页数量。
offset number 1 首页页码偏移量。
current number 1 当前页码。
view enum:
 'box'
 'circle'
 'simple'
'box' 预设的组件显示样式类型。
size enum:
 'small'
 'middle'
 'large'
'middle' 组件的显示尺寸。
onSelect function () => {} 页码被选择时的将会被调用的回调函数.
(currentPage: number, index: number) => void。
preIcon node null 替代默认的左侧"上一页"的图标。
nextIcon node null 替代默认的右侧"下一页"的图标。
withQuickJumper bool false 是否要显示快速跳转框。
withBorderJumper bool false 是否要显示快速跳转到首页或者尾页的页码。
className string 根元素的class。
style object {} 根元素的样式.
eachDefaultStyle object {} 每一个页码元素的默认样式。
eachHoveredStyle object {} 每一个页码元素在被Hover时的样式。
eachActiveStyle object {} 每一个页码元素在被激活时的样式。
eachDisabledStyle object {} 每一个页码元素在被禁用时的样式。

未在文档中说明的属性将会被自动加到根元素或form元素上。