Pagination 分页器

使用场景

采用分页的形式分隔长列表，每次只加载一个页面。

示例

基本示例

inline

function Basic() { return <Pagination total={100} onChange={console.log} />; }

function Basic() {
  return <Pagination total={100} onChange={console.log} />;
}

简单模式

1/10页

inline

function Simple() { return <Pagination shape="simple" />; }

function Simple() {
  return <Pagination shape="simple" />;
}

尺寸

inline

function Size() { const [current, onChange] = useState(1); return ( <Grid columns={1} spacingY="l"> <Pagination size="small" current={current} onChange={onChange} /> <Pagination size="medium" current={current} onChange={onChange} /> <Pagination size="large" current={current} onChange={onChange} /> </Grid> ); }

function Size() {
  const [current, onChange] = useState(1);

  return (
    <Grid columns={1} spacingY="l">
      <Pagination size="small" current={current} onChange={onChange} />
      <Pagination size="medium" current={current} onChange={onChange} />
      <Pagination size="large" current={current} onChange={onChange} />
    </Grid>
  );
}

每页个数选择

总条目 200

每页条目数 10

每页显示

10

inline

function PageSizeList() { const [pageSize, setPageSize] = useState(10); const total = 200; return ( <div> <Description items={[ { label: '总条目', content: total }, { label: '每页条目数', content: pageSize }, ]} /> <Pagination hasPageSizeList pageSize={pageSize} onPageSizeChange={setPageSize} total={total} onChange={console.log} /> </div> ); }

function PageSizeList() {
  const [pageSize, setPageSize] = useState(10);
  const total = 200;

  return (
    <div>
      <Description
        items={[
          { label: '总条目', content: total },
          { label: '每页条目数', content: pageSize },
        ]}
      />
      <Pagination
        hasPageSizeList
        pageSize={pageSize}
        onPageSizeChange={setPageSize}
        total={total}
        onChange={console.log}
      />
    </div>
  );
}

受控写法

总条目 100

当前页码 2

inline

function Controlled() { const [current, onChange] = useState(2); return ( <div> <Description items={[ { label: '总条目', content: 100 }, { label: '当前页码', content: current }, ]} /> <Button onClick={() => onChange(1)}>回到第1页</Button> <Button onClick={() => onChange(10)} style={{ marginLeft: 32 }}> 跳转到最后一页 </Button> <Pagination style={{ marginTop: 8 }} fill current={current} total={100} onChange={onChange} /> </div> ); }

function Controlled() {
  const [current, onChange] = useState(2);

  return (
    <div>
      <Description
        items={[
          { label: '总条目', content: 100 },
          { label: '当前页码', content: current },
        ]}
      />
      <Button onClick={() => onChange(1)}>回到第1页</Button>
      <Button onClick={() => onChange(10)} style={{ marginLeft: 32 }}>
        跳转到最后一页
      </Button>

      <Pagination style={{ marginTop: 8 }} fill current={current} total={100} onChange={onChange} />
    </div>
  );
}

API

字段	描述
style	CSSProperties
className	string
fill	boolean
size	"small" | "medium" | "large" = medium 分页器按钮尺寸
shape	"normal" | "simple" = normal 外观类型
total	number = 100 总记录数
current	number 受控的 page 页码值（页码从 1 开始）
defaultCurrent	number = 1 默认激活的页码（页码从 1 开始）
onChange	(nextValue: number) => void 页码变化时的回调
disabled	boolean 是否禁用
hasNextButton	boolean = true 是否有下翻页按钮
hasPrevButton	boolean = true 是否有上翻页按钮
pageSize	number 每页数据的个数，需受控使用
defaultPageSize	number = 10 非受控用法下，pageSize 的默认值
pageSizeList	number[] = [5, 10, 20] 每页个数选择的列表
hasPageSizeList	boolean = false 是否有页数选择列表
onPageSizeChange	(nextPageSize: number) => void 每页个数变化时的回调
locale	{ previous: string; next: string; } = { previous: '上一页', next: '下一页', } 文案
showJump	boolean type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮; 当设置 showJump 为 false 时，不再显示该跳转区域