组件库教程社区 | React & Headless UI

其它组件

基础用法

AI 时代的组件库

Pagination 完整案例

传统案例

Tailwind 版本

edit js

CSS 版本

edit css

edit js

使用方法

import { Select, IconCheckLine, IconCloseLine, IconDownLine, IconEmptyFill, } from '@t-headless-ui/react';

<Pagination.Root
  total={100}
>
  <Pagination.Total>
    {(total, range) => (
      <div>
        {`${range[0]} - ${range[1]} of ${total} items`}
      </div>
    )}
  </Pagination.Total>

  <Pagination.Previous>
    <IconLeftLine />
  </Pagination.Previous>

  <Pagination.StartItem>
    {(page) => <span>{page}</span>}
  </Pagination.StartItem>

  <Pagination.StartEllipsis>
    <IconMoreFill />
  </Pagination.StartEllipsis>

  <Pagination.Items>
    {(page) => <span>{page}</span>}
  </Pagination.Items>

  <Pagination.EndEllipsis>
    <IconMoreFill />
  </Pagination.EndEllipsis>

  <Pagination.EndItem>
    {(page) => <span>{page}</span>}
  </Pagination.EndItem>

  <Pagination.Next>
    <IconRightLine />
  </Pagination.Next>

  <div>
    <span>Go to</span>
    <Pagination.Jumper />
    <span>Page</span>
  </div>

  <Pagination.Option>
      {({ sizeOptions, pageSize, disabled, onPageSizeChange }) => (
        // this is a select component to change page size
        // you can find an example in Pagination demo page
        <PageSizeSelect sizeOptions={sizeOptions} pageSize={pageSize} disabled={disabled} onPageSizeChange={onPageSizeChange} />
      )}
    </Pagination.Option>
  </Pagination.Root>

API

Pagination.Root Props

接口名: PaginationRootProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className' | 'onChange'>

参数名	类型	描述	默认值
style	CSSProperties	分页器的样式	-
className	string	分页器的类名	-
current	number	当前页	-
pageSize	number	每页数据条数	-
total	number	数据总数	0
defaultCurrent	number	当前页默认值	-
defaultPageSize	number	默认每页数据条数	-
disabled	boolean	是否禁用	-
hideOnSinglePage	boolean	是否在只有一页的情况下隐藏	-
sizeOptions	number[]	每页可以显示数据条数	[10, 20, 50]
bufferSize	number	`current` 页与 `...` 之间的页码个数	2
onChange	(pageNumber: number, pageSize: number) => void	变化时的回调	-
onPageSizeChange	(size: number, current: number) => void	pageSize 变化时的回调	-
pageSizeChangeResetCurrent	boolean	`pageSize` 改变的时候重置当前页码为 `1`	-

Pagination.StartItem/EndItem/Items Props

接口名: PaginationItemProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode \| ((page: number, { isActive, disabled }: { isActive: boolean; disabled: boolean; }) => ReactNode)	分页项的内容	-

Pagination.Previous/Next Props

接口名: PaginationPageTurningProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode	分页项的内容	-

Pagination.StartEllipsis/EndEllipsis Props

接口名: PaginationEllipsisProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode	分页项的内容	-

Pagination.Option Props

接口名: PaginationOptionProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode \| (({ sizeOptions, pageSize, disabled, onPageSizeChange, }: { sizeOptions: number[]; pageSize: number; disabled: boolean; onPageSizeChange: (size: number, current: number) => void; }) => ReactNode)	分页项的内容	-

Pagination.Jumper Props

接口名: PaginationJumperProps

参数名	类型	描述	默认值
showCurrent	boolean	是否显示当前页	-
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-

Pagination.Total Props

接口名: PaginationTotalProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'children'>

参数名	类型	描述	默认值
children	ReactNode \| ((total: number, range: number[], allPages: number) => ReactNode)	分页项的内容	-

选择器 Select

Tailwind 版本

CSS 版本

使用方法

API

分页 Pagination

采用分页控制单页内的信息数量，也可进行页面跳转。。

Tailwind 版本

edit js

CSS 版本

edit css

edit js

使用方法

import { Select, IconCheckLine, IconCloseLine, IconDownLine, IconEmptyFill, } from '@t-headless-ui/react';

<Pagination.Root
  total={100}
>
  <Pagination.Total>
    {(total, range) => (
      <div>
        {`${range[0]} - ${range[1]} of ${total} items`}
      </div>
    )}
  </Pagination.Total>

  <Pagination.Previous>
    <IconLeftLine />
  </Pagination.Previous>

  <Pagination.StartItem>
    {(page) => <span>{page}</span>}
  </Pagination.StartItem>

  <Pagination.StartEllipsis>
    <IconMoreFill />
  </Pagination.StartEllipsis>

  <Pagination.Items>
    {(page) => <span>{page}</span>}
  </Pagination.Items>

  <Pagination.EndEllipsis>
    <IconMoreFill />
  </Pagination.EndEllipsis>

  <Pagination.EndItem>
    {(page) => <span>{page}</span>}
  </Pagination.EndItem>

  <Pagination.Next>
    <IconRightLine />
  </Pagination.Next>

  <div>
    <span>Go to</span>
    <Pagination.Jumper />
    <span>Page</span>
  </div>

  <Pagination.Option>
      {({ sizeOptions, pageSize, disabled, onPageSizeChange }) => (
        // this is a select component to change page size
        // you can find an example in Pagination demo page
        <PageSizeSelect sizeOptions={sizeOptions} pageSize={pageSize} disabled={disabled} onPageSizeChange={onPageSizeChange} />
      )}
    </Pagination.Option>
  </Pagination.Root>

API

Pagination.Root Props

接口名: PaginationRootProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className' | 'onChange'>

参数名	类型	描述	默认值
style	CSSProperties	分页器的样式	-
className	string	分页器的类名	-
current	number	当前页	-
pageSize	number	每页数据条数	-
total	number	数据总数	0
defaultCurrent	number	当前页默认值	-
defaultPageSize	number	默认每页数据条数	-
disabled	boolean	是否禁用	-
hideOnSinglePage	boolean	是否在只有一页的情况下隐藏	-
sizeOptions	number[]	每页可以显示数据条数	[10, 20, 50]
bufferSize	number	`current` 页与 `...` 之间的页码个数	2
onChange	(pageNumber: number, pageSize: number) => void	变化时的回调	-
onPageSizeChange	(size: number, current: number) => void	pageSize 变化时的回调	-
pageSizeChangeResetCurrent	boolean	`pageSize` 改变的时候重置当前页码为 `1`	-

Pagination.StartItem/EndItem/Items Props

接口名: PaginationItemProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode \| ((page: number, { isActive, disabled }: { isActive: boolean; disabled: boolean; }) => ReactNode)	分页项的内容	-

Pagination.Previous/Next Props

接口名: PaginationPageTurningProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode	分页项的内容	-

Pagination.StartEllipsis/EndEllipsis Props

接口名: PaginationEllipsisProps

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode	分页项的内容	-

Pagination.Option Props

接口名: PaginationOptionProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>

参数名	类型	描述	默认值
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-
children	ReactNode \| (({ sizeOptions, pageSize, disabled, onPageSizeChange, }: { sizeOptions: number[]; pageSize: number; disabled: boolean; onPageSizeChange: (size: number, current: number) => void; }) => ReactNode)	分页项的内容	-

Pagination.Jumper Props

接口名: PaginationJumperProps

参数名	类型	描述	默认值
showCurrent	boolean	是否显示当前页	-
className	string	分页项的类名	-
style	CSSProperties	分页项的样式	-

Pagination.Total Props

接口名: PaginationTotalProps

继承: Omit<HTMLAttributes<HTMLDivElement>, 'children'>

参数名	类型	描述	默认值
children	ReactNode \| ((total: number, range: number[], allPages: number) => ReactNode)	分页项的内容	-

分页 Pagination采用分页控制单页内的信息数量，也可进行页面跳转。。

Tailwind 版本

CSS 版本

使用方法

API

分页 Pagination采用分页控制单页内的信息数量，也可进行页面跳转。。

Tailwind 版本

CSS 版本

使用方法

API

分页 Pagination
采用分页控制单页内的信息数量，也可进行页面跳转。。

分页 Pagination
采用分页控制单页内的信息数量，也可进行页面跳转。。