分页

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

导入

import { Pagination, PaginationItem } from "@resolid/react-ui";

Pagination 分页组件
PaginationItem 分页项目

演示

import { Pagination } from "@resolid/react-ui";

export default function App() {
  return <Pagination total={512} />;
}

举例

颜色

通过传递 color 属性，可以选择使用 primary、secondary、success、warning、danger 和 neutral 这些颜色。

import { Pagination } from "@resolid/react-ui";

export default function App() {
  const colors = ["primary", "secondary", "success", "warning", "danger", "neutral"];

  return (
    <div className={"flex flex-col gap-3"}>
      {colors.map((color) => (
        <Pagination key={color} color={color} total={512} />
      ))}
    </div>
  );
}

禁用

使用 disabled 属性禁用分页

import { Pagination } from "@resolid/react-ui";

export default function App() {
  return <Pagination disabled total={512} />;
}

显示总数

使用 renderTotal 属性可以渲染总数

import { Pagination } from "@resolid/react-ui";

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

相邻和边界

使用 siblings 和 boundaries 属性可以设置当前页面前后和分页开头结尾显示的页数

import { Pagination } from "@resolid/react-ui";

export default function App() {
  return <Pagination siblings={1} boundaries={1} defaultPage={6} total={512} />;
}

自定义项目

使用 renderItem 属性配合 PaginationItem 组件可以渲染分页项目

import { Pagination, PaginationItem } from "@resolid/react-ui";
import { Link, useSearchParams } from "react-router";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  const [searchParams] = useSearchParams();

  return (
    <Pagination
      total={512}
      defaultPage={searchParams.get("page")}
      renderItem={(itemProps) => (
        <PaginationItem
          {...itemProps}
          render={(props) => (
            <Link to={{ search: `page=${itemProps.page}`, hash: "自定义项目" }} {...props}>
              {itemProps.pageType.includes("ellipsis") ? (
                "..."
              ) : itemProps.pageType === "previous" ? (
                <SpriteIcon size={"1rem"} name={"angle-left"} />
              ) : itemProps.pageType === "next" ? (
                <SpriteIcon size={"1rem"} name={"angle-right"} />
              ) : (
                itemProps.page
              )}
            </Link>
          )}
        />
      )}
    />
  );
}

属性

Pagination

属性	类型	默认值	必须
属性total	简介总记录数	类型number	默认值-	必须true
属性page	简介当前分页	类型number	默认值-	必须false
属性defaultPage	简介默认分页	类型string \| number \| null	默认值1	必须false
属性onChange	简介 onChange 回调	类型(page: number) => void	默认值-	必须false
属性pageSize	简介分页大小	类型number	默认值20	必须false
属性siblings	简介当前页面之前和之后显示的页数	类型number	默认值2	必须false
属性boundaries	简介分页开头和结尾处显示的页数	类型number	默认值2	必须false
属性disabled	简介是否禁用	类型boolean	默认值false	必须false
属性color	简介颜色	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值"primary"	必须false
属性renderItem	简介分页项目渲染	类型((props: PaginationItemProps) => ReactElement)	默认值-	必须false
属性renderTotal	简介总数显示渲染	类型((total: number, totalPages: number) => ReactElement)	默认值-	必须false

PaginationItem

属性	类型	默认值	必须
属性page	简介	类型number	默认值-	必须true
属性pageType	简介	类型"page" \| "next" \| "previous" \| "start-ellipsis" \| "end-ellipsis"	默认值-	必须true
属性disabled	简介	类型boolean	默认值-	必须true
属性color	简介	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值-	必须true
属性currentPage	简介	类型number	默认值-	必须true
属性setCurrentPage	简介	类型(page: number) => void	默认值-	必须true

建议更改此页面