分页

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

导入

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 h-8 items-center inline-flex 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