TaroifyReact UI

    Pagination 分页

    介绍

    数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

    引入

    import { Pagination } from "@taroify/core"

    代码演示

    基础用法

    通过 current 来绑定当前页码。

    export default function BasicPagination() {
  const [current, setCurrent] = useState<number>(1)
  return <Pagination current={current} count={10} onChange={(page) => setCurrent(page)} />
}

    简单模式

    将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。

    export default function BasicPagination() {
  const [current, setCurrent] = useState<number>(1)
  return (
    <Pagination current={current} count={10} mode="simple" onChange={(page) => setCurrent(page)} />
  )
}

    显示省略号

    设置 Pagination.Item.type 为 start-ellipsis 或者 end-ellipsis 展示省略号按钮，点击后可以快速跳转。

    function PaginationWithEllipses() {
  const [current, setCurrent] = useState<number>(1)
  return (
    <Pagination current={current} siblingCount={1} count={13} onChange={(page) => setCurrent(page)}>
      <Pagination.Item type="start-ellipsis" />
      <Pagination.Item type="end-ellipsis" />
    </Pagination>
  )
}

    自定义按钮

    通过 Pagination.Item 组件来自定义分页按钮的内容。

    function PaginationWithCustomButton() {
  const [current, setCurrent] = useState<number>(1)
  return (
    <Pagination current={current} count={6} onChange={(page) => setCurrent(page)}>
      <Pagination.Item type="previous">
        <ArrowLeft />
      </Pagination.Item>
      <Pagination.Item type="next">
        <ArrowRight />
      </Pagination.Item>
    </Pagination>
  )
}

    API

    Props

    参数说明类型默认值
    current当前页码number-
    mode显示模式，可选值为 simplestringmulti
    prevText上一页按钮文字string上一页
    nextText下一页按钮文字string下一页
    siblingCount当前页码两侧显示的数字个数number2
    count总页数number-

    Events

    事件名说明回调参数
    onChange页码改变时触发-

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --pagination-height40px * $hd-
    --pagination-font-sizevar(--font-size-md)-
    --pagination-background-colorvar(--white)-
    --pagination-item-min-width36px * $hd-
    --pagination-item-colorvar(--blue)-
    --pagination-item-active-colorvar(--white)-
    --pagination-item-active-background-colorvar(--pagination-item-color)-
    --pagination-item-disabled-colorvar(--gray-7)-
    --pagination-item-disabled-background-colorvar(--background-color)-
    --pagination-item-disabled-opacityvar(--disabled-opacity)-
    --pagination-button-padding0 var(--padding-base)-
    --pagination-desc-colorvar(--gray-7)-