Pagination 分页

使用可自定义的控件浏览数据页面。

导入

import { Pagination } from 'asterui'

示例

基础分页

带有页码的简单分页。

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={85}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

带尺寸更改器

允许用户更改每页大小。

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  return (
      <Pagination
        current={current}
        total={500}
        pageSize={pageSize}
        showSizeChanger
        onChange={(page, size) => {
          setCurrent(page);
          setPageSize(size);
        }}
      />
    )
}

export default App

显示总数

显示项目总数。

Total 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={250} showTotal />
    )
}

export default App

自定义总数

自定义总数的渲染。

Showing 1-10 of 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination
        total={250}
        showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total} items`}
      />
    )
}

export default App

快速跳转

允许用户跳转到特定页面。

Go to

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={500} showQuickJumper />
    )
}

export default App

所有功能

启用所有功能的分页。

1-10 of 500

Go to

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={500}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

简单模式

1 / 10

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} simple />
    )
}

export default App

尺寸

分页控件的不同尺寸。

Extra Small

Small

Medium (default)

Large

import { Pagination } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <div>
          <div className="text-sm text-base-content/60 mb-2">Extra Small</div>
          <Pagination total={100} size="xs" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Small</div>
          <Pagination total={100} size="sm" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Medium (default)</div>
          <Pagination total={100} size="md" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Large</div>
          <Pagination total={100} size="lg" />
        </div>
      </div>
    )
}

export default App

禁用

分页的禁用状态。

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} disabled />
    )
}

export default App

API

`Pagination`

属性	描述	类型	默认值
`current`	当前页码(受控)	`number`	-
`defaultCurrent`	默认初始页码	`number`	`1`
`total`	项目总数	`number`	-
`pageSize`	每页项目数(受控)	`number`	-
`defaultPageSize`	默认每页项目数	`number`	`10`
`pageSizeOptions`	页面大小选择器的选项	`number[]`	`[10, 20, 50, 100]`
`onChange`	页面或 pageSize 更改时的回调	`(page: number, pageSize: number) => void`	-
`onShowSizeChange`	pageSize 更改时的回调	`(current: number, size: number) => void`	-
`showSizeChanger`	显示页面大小选择器	`boolean`	`false`
`showQuickJumper`	显示快速跳转到页面的输入	`boolean`	`false`
`showTotal`	显示总数或自定义渲染函数	`boolean \| ((total: number, range: [number, number]) => ReactNode)`	`false`
`simple`	简单模式,带有最少的控件	`boolean`	`false`
`size`	分页按钮的尺寸	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`disabled`	禁用所有分页控件	`boolean`	`false`
`className`	额外的 CSS 类	`string`	-

可访问性

使用带有 aria-label="Pagination" 的 nav 元素
当前页面用 aria-current="page" 标记
禁用的按钮具有正确的 aria-disabled 状态
快速跳转输入具有可访问的标签