分页

允许用户从一系列页面中选择特定页面。

导入

import { Pagination, PaginationItem } from "@resolid/react-ui";
  • Pagination 分页组件
  • PaginationItem 分页的项目

用法

<Pagination total={2120} />

禁用

<Pagination total={2120} disabled />

显示总计

<Pagination
  total={512}
  renderTotal={(total) => (
    <span className={"bg-bg-subtle inline-flex h-8 items-center rounded px-2"}>总计: {total}</span>
  )}
/>

相邻和边界

相邻显示 1 个分页项目

相邻显示 3 个分页项目

边界显示 1 个分页项目

边界显示 3 个分页项目

相邻显示 1 个分页项目, 边界显示 3 个分页项目

<div className={'flex flex-col gap-1 mx-auto'}>
  <p>相邻显示 1 个分页项目</p>
  <Pagination
    total={512}
    defaultPage={9}
    siblings={1}
  />
</div>
<div className={'flex flex-col gap-1 mx-auto'}>
<p>相邻显示 3 个分页项目</p>
  <Pagination
    total={512}
    defaultPage={9}
    siblings={3}
  />
</div>
<div className={'flex flex-col gap-1 mx-auto'}>
<p>边界显示 1 个分页项目</p>
  <Pagination
    total={512}
    defaultPage={9}
    boundaries={1}
  />
</div>
<div className={'flex flex-col gap-1 mx-auto'}>
<p>边界显示 3 个分页项目</p>
  <Pagination
    total={512}
    defaultPage={9}
    boundaries={3}
  />
</div>
<div className={'flex flex-col gap-1 mx-auto'}>
<p>相邻显示 1 个分页项目, 边界显示 3 个分页项目</p>
  <Pagination
    total={512}
    defaultPage={9}
    siblings={1}
    boundaries={3}
  />
</div>

分页项目子组件

<Pagination
  total={512}
  renderPage={(props) => (
    <PaginationItem asChild {...props}>
      <Link to={{ search: `page=${props.page}`, hash: "分页项目子组件" }}>
        {props.pageType.includes("ellipsis") ? (
          "..."
        ) : props.pageType == "previous" ? (
          <SpriteIcon size={"1rem"} name={"angle-left"} />
        ) : props.pageType == "next" ? (
          <SpriteIcon size={"1rem"} name={"angle-right"} />
        ) : (
          props.page
        )}
      </Link>
    </PaginationItem>
  )}
/>

属性

分页

属性total类型number默认值-必须true
属性page类型number默认值-必须false
属性defaultPage类型number默认值1必须false
属性pageSize类型number默认值20必须false
属性disabled类型boolean默认值-必须false
属性siblings类型number默认值2必须false
属性boundaries类型number默认值2必须false
属性onChange类型(page: number) => void默认值-必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性renderTotal类型((total: number, totalPage: number) => ReactElement)默认值-必须false
属性renderPage类型((props: PaginationItemProps) => ReactElement)默认值-必须false

分页项目

属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值-必须true
属性disabled类型boolean默认值-必须true
属性page类型number默认值-必须true
属性pageType类型"page" | "next" | "previous" | "start-ellipsis" | "end-ellipsis"默认值-必须true
属性pageState类型number默认值-必须true
属性setPageState类型(page: number) => void默认值-必须true
属性asChild类型boolean默认值false必须false