Pagination 分页

用于长列表或表格的数据分页。

基础用法

import { Pagination } from '@airo-ui/react'

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

受控与非受控

import { useState } from 'react'
import { Pagination } from '@airo-ui/react'

function ControlledDemo() {
  const [current, setCurrent] = useState(1)

  return (
    <Pagination
      current={current}
      total={100}
      onChange={setCurrent}
    />
  )
}

function UncontrolledDemo() {
  return <Pagination defaultCurrent={3} total={100} />
}

自定义每页条数

import { Pagination } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Pagination total={100} pageSize={10} />
      <Pagination total={100} pageSize={20} />
    </>
  )
}

API

Props

名称	类型	默认值	说明
current	number	—	受控模式当前页码
defaultCurrent	number	1	非受控模式默认页码
total	number	—	总条目数（必填）
pageSize	number	10	每页条数
onChange	(page: number) => void	—	页码变化时触发