# @ajna/pagination 中文文档

规范地址：https://npmcn.com/package/%40ajna/pagination/

版本：1\.4\.19
npm 元数据更新时间：2022-06-09T21:28:15.229Z
中文译文更新时间：2026-11-05T22:34:34.483Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ajna/pagination
原文对照：https://npmcn.com/package/%40ajna/pagination/?lang=original
项目主页：https://github.com/niconiahi/ajna
源码仓库：https://github.com/niconiahi/ajna

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：74.2 kB，58 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@chakra-ui/react ^2\.2\.1，@emotion/react ^11\.9\.0，@emotion/styled ^11\.8\.1，framer-motion ^6\.3\.11，react ^18\.1\.0，react-dom ^18\.1\.0，react-scripts 5\.0\.1
- 首次发布：2021-07-17T21:30:04.006Z
- 最新版本发布：2022-06-09T21:28:15.130Z
- 近 30 天下载量：11813（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）

## 中文简介

## 目录

## 安装

```sh
npm install @ajna/pagination
```

也可以使用：`pnpm add @ajna/pagination`、`yarn add @ajna/pagination`、`bun add @ajna/pagination`

## README

# @ajna/涂鸦

## 目录

-   [版本](https://npmcn.com/package/%40ajna/pagination/#readme-version)
-   [安装](https://npmcn.com/package/%40ajna/pagination/#readme-installation)
-   [带有所有选项的演示](https://npmcn.com/package/%40ajna/pagination/#readme-demo-with-all-options-applied)
-   [构成部分](https://npmcn.com/package/%40ajna/pagination/#readme-components)
    -   [倾斜](https://npmcn.com/package/%40ajna/pagination/#readme-pagination)
    -   [安装器](https://npmcn.com/package/%40ajna/pagination/#readme-paginationcontainer)
    -   [倾斜 页面组](https://npmcn.com/package/%40ajna/pagination/#readme-paginationpagegroup)
    -   [倾斜 上一个](https://npmcn.com/package/%40ajna/pagination/#readme-paginationprevious)
    -   [下一个](https://npmcn.com/package/%40ajna/pagination/#readme-paginationnext)
    -   [接头](https://npmcn.com/package/%40ajna/pagination/#readme-paginationpage)
    -   [分隔符](https://npmcn.com/package/%40ajna/pagination/#readme-paginationseparator)
-   [钩子](https://npmcn.com/package/%40ajna/pagination/#readme-hooks)
    -   [图片](https://npmcn.com/package/%40ajna/pagination/#readme-usepagination)
-   [使用量](https://npmcn.com/package/%40ajna/pagination/#readme-usage)
    -   [最小值](https://npmcn.com/package/%40ajna/pagination/#readme-minimal)
    -   [样式](https://npmcn.com/package/%40ajna/pagination/#readme-styling)
    -   [残疾](https://npmcn.com/package/%40ajna/pagination/#readme-disabling)
    -   [页面大小](https://npmcn.com/package/%40ajna/pagination/#readme-page-size)
    -   [限制](https://npmcn.com/package/%40ajna/pagination/#readme-limits)
    -   [分隔符](https://npmcn.com/package/%40ajna/pagination/#readme-separator)
    -   [折减](https://npmcn.com/package/%40ajna/pagination/#readme-offset)
    -   [共计](https://npmcn.com/package/%40ajna/pagination/#readme-total)
    -   [完全使用实例](https://npmcn.com/package/%40ajna/pagination/#readme-full-usage-example)

## 版本

## [![npm version](https://badge.fury.io/js/%40ajna%2Fpagination.svg)](https://badge.fury.io/js/%40ajna%2Fpagination)

  

## 安装

### 无

```bash
npm i @ajna/pagination
```

### 雅伦

```bash
yarn add @ajna/pagination
```

  

## 带有所有选项的演示

### [看这个沙盒里](https://codesandbox.io/s/ajna-pagination-forked-7mrtq)

  

## 构成部分

  

### 倾斜

| Prop | 说明 | 类型 | 默认 | 需求 |
| --- | --- | --- | --- | --- |
| 页面 | 页数总数 | 编号 |  | 对 |
| 当前页 | 当前选择的页面 | 编号 |  | 对 |
| 页面更改 | 在返回所选最后一页的更改处理器上 | (当前页:数字) |  | 对 |
| 已失效 | 如果页标上的所有项目禁用或不禁用, 则解码 | 布尔 | 虚假 | 没有 |

  

### 安装器

这是一个 **弹性** 组件,所以任何 **弹性程序** 已接受

  

### 倾斜 页面组

这是一个 **堆栈** 组件,所以任何 **堆叠选项** 已接受

  

### 倾斜 上一个

这是一个 **按钮** 组件,所以任何 **按钮方案** 已接受

  

### 下一个

这是一个 **按钮** 组件,所以任何 **按钮方案** 已接受

  

### 接头

这是一个 **按钮** 组件,所以任何 **按钮方案** 已接受

  

### 分隔符

这是一个 **按钮** 组件,所以任何 **按钮方案** 已接受

  

## 钩子

### 图片

  

#### 选项

| Prop | 说明 | 类型 | 默认 | 需求 |
| --- | --- | --- | --- | --- |
| 初始状态 | 标记值的初始状态 | 初始状态 |  | 对 |
| 共计 | 从您消费的终点计数 | 编号 | 未定义 | 没有 |
| 限制 | 限制会减少要显示的页面量 | 限制 | 未定义 | 没有 |
| 页面 | 如果手动设定页数, 则优先 | 编号 | 未定义 | 没有 |

  

#### 返回的数值

| Prop | 说明 | 类型 | 默认 |
| --- | --- | --- | --- |
| 页:1 | 生成的偏移值 | 编号 | 0 个 |
| 页次 | 要渲染的页面数组 | 编号\[\] | \[ |
| 页面 | 页数总数 | 编号 | 0 个 |
| 当前页 | 当前选择的页面 | 编号 |  |
| 页面大小 | 每页物品数量 | 编号 | 未定义 |
| 已失效 | 如果页标上的所有项目禁用或不禁用, 则解码 | 布尔 | 虚假 |
| 设置 | 已失效值的设置器 | 调度“ 特定状态行动” |  |
| 已失效 | 已失效值的设置器 | 调度“ 特定状态行动” |  |
| 当前设置 | 当前 Page 值的设置器 | 调度“ 特定状态行动” |  |

  

## 使用量

  

### 最小值

这是你需要的最起码的设置 把它弄起来工作

```tsx
import React, { FC, ChangeEvent, useEffect, useState } from "react";
import { ChakraProvider } from "@chakra-ui/react";
import {
  Pagination,
  usePagination,
  PaginationNext,
  PaginationPage,
  PaginationPrevious,
  PaginationContainer,
  PaginationPageGroup,
} from "@ajna/pagination";

const Minimal: FC = () => {
  const {
    currentPage,
    setCurrentPage,
    pagesCount,
    pages
  } = usePagination({
    pagesCount: 12,
    initialState: { currentPage: 1 },
  });

  return (
    <ChakraProvider>
      <Pagination
        pagesCount={pagesCount}
        currentPage={currentPage}
        onPageChange={setCurrentPage}
      >
        <PaginationContainer>
          <PaginationPrevious>Previous</PaginationPrevious>
          <PaginationPageGroup>
            {pages.map((page: number) => (
              <PaginationPage 
                key={`pagination_page_${page}`} 
                page={page} 
              />
            ))}
          </PaginationPageGroup>
          <PaginationNext>Next</PaginationNext>
        </PaginationContainer>
      </Pagination>
    </ChakraProvider>
  );
};

export default Demo;
```

  

### 样式

这个 **颜色( c)** prop 将包含当前选中页面的道具 所有其他道具将适用于每一页

```tsx
<PaginationPage
  w={7}
  bg="red.300"
  fontSize="sm"
  _hover={{
    bg: "green.300"
  }}
  _current={{
    w: 7,
    bg: "green.300"
    fontSize: "sm"
    _hover: {
      bg: "blue.300"
    },
  }}
>
```

  

```tsx
<PaginationPrevious
  bg="blue.500"
  w="20rem"
  //...any button prop
>
  Previous
</PaginationPrevious>
```

  

```tsx
<PaginationNext
  w={7}
  bg="red.300"
  fontSize="sm"
  //...any button prop
>
  Next
</PaginationNext>
```

  

```tsx
<PaginationContainer
  bg="blue.500"
  w="full"
  //...any flex prop
>
  ...
</PaginationContainer>
```

  

```tsx
<PaginationPageGroup
  bg="blue.500"
  w="full"
  //...any stack prop
>
  ...
</PaginationPageGroup>
```

  

### 残疾

它提供了一种商品禁用道具,可以同时禁用/启用您所有的发卡组件

```tsx
const { isDisabled, setIsDisabled } = usePagination({
  initialState: { isDisabled: false }
});

const handleDisableClick = () => {
  return setIsDisabled((oldState) => !oldState);
};

<Pagination
  isDisabled={isDisabled}
>
```

  

### 页面大小

它提供了一个商品页面大小 设置和获取器

```tsx
const { pageSize, setPageSize } = usePagination({
  initialState: { pageSize: 5 },
});

const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
  const pageSize = Number(event.target.value);

  setPageSize(pageSize);
};
```

  

### 限制

您可以通过路过来修剪所显示的页面的挂载 _两者_ **限制** 与此同时 有话要说 _两者_,否则将不适用限制

```tsx
const { pages } = usePagination({
  limits: {
    outer: outerLimit,
    inner: innerLimit,
  },
});
```

  

### 分隔符

附加, 您可以自定义限制时使用的分隔符组件

```tsx
<PaginationPageGroup separator={<PaginationSeparator _hover={{ bg: 'purple.500' }} bg='teal.500'>}>
  {pages.map((page: number) => (
    <PaginationPage key={`pagination_page_${page}`} page={page} />
  ))}
</PaginationPageGroup>
```

  

### 折减

可能你正在消费的API 与一个 **页:1** 一个是用来计算和供养你的 **页面大小** 财务报告和审定财务报表 **当前页** 数值

用下一个公式计算:

```
[currentPage * pageSize - pageSize]

currentPage === 1 && pageSize === 5 // offset = 0;
currentPage === 2 && pageSize === 5 // offset = 5;
currentPage === 3 && pageSize === 5 // offset = 10;
```

```tsx
const { offset, pageSize } = usePagination({
  initialState: { pageSize: 5 },
});

fetchUsingOffset(pageSize, offset).then((data) => {
  // use data
});
```

  

### 共计

记住,如果你知道 **共计** 请求的终点项目数量,不是 一个奇怪的东西要返回, 你可以使用它生成 **页次** 给你的

```tsx
const { pages, pagesCount } = usePaginator({
  total: 4021,
  initialState: { pageSize: 5 }
});

<Pagination
  pagesCount={pagesCount}
>

<PaginationPageGroup>
  {pages.map((page: number) => (
    <PaginationPage key={`pagination_page_${page}`} page={page} />
  ))}
</PaginationPageGroup>
```

  

### 完全使用实例

在此示例中, 您可以看到正在应用的库提供的所有可能特性 以显示 10 个 pickmons 名称, 并具有播放页面大小和禁用状态的能力

```tsx
import React, { FC, ChangeEvent, useEffect, useState } from "react";
import { Grid, Center, Select, Text, Button, Stack } from "@chakra-ui/react";
import {
  Pagination,
  usePagination,
  PaginationPage,
  PaginationNext,
  PaginationPrevious,
  PaginationPageGroup,
  PaginationContainer,
  PaginationSeparator,
} from "@ajna/pagination";

const fetchPokemons = async (
  pageSize: number,
  offset: number
): Promise<any> => {
  return await fetch(
    `https://pokeapi.co/api/v2/pokemon?limit=${pageSize}&offset=${offset}`
  ).then(async (res) => await res.json());
};

const Full: FC = () => {
  // states
  const [pokemonsTotal, setPokemonsTotal] = useState<number | undefined>(
    undefined
  );
  const [pokemons, setPokemons] = useState<any[]>([]);

  // constants
  const outerLimit = 2;
  const innerLimit = 2;

  // pagination hook
  const {
    pages,
    pagesCount,
    offset,
    currentPage,
    setCurrentPage,
    setIsDisabled,
    isDisabled,
    pageSize,
    setPageSize,
  } = usePagination({
    total: pokemonsTotal,
    limits: {
      outer: outerLimit,
      inner: innerLimit,
    },
    initialState: {
      pageSize: 5,
      isDisabled: false,
      currentPage: 1,
    },
  });

  // effects
  useEffect(() => {
    fetchPokemons(pageSize, offset)
      .then((pokemons) => {
        setPokemonsTotal(pokemons.count);
        setPokemons(pokemons.results);
      })
      .catch((error) => console.error("App =>", error));
  }, [currentPage, pageSize, offset]);

  // handlers
  const handlePageChange = (nextPage: number): void => {
    // -> request new data using the page number
    setCurrentPage(nextPage);
    console.log("request new data with ->", nextPage);
  };

  const handlePageSizeChange = (
    event: ChangeEvent<HTMLSelectElement>
  ): void => {
    const pageSize = Number(event.target.value);

    setPageSize(pageSize);
  };

  const handleDisableClick = (): void => {
    setIsDisabled((oldState) => !oldState);
  };

  return (
    <Stack>
      <Pagination
        pagesCount={pagesCount}
        currentPage={currentPage}
        isDisabled={isDisabled}
        onPageChange={handlePageChange}
      >
        <PaginationContainer
          align="center"
          justify="space-between"
          p={4}
          w="full"
        >
          <PaginationPrevious
            _hover={{
              bg: "yellow.400",
            }}
            bg="yellow.300"
            isDisabled
            onClick={() => console.warn("I'm clicking the previous")}
          >
            <Text>Previous</Text>
          </PaginationPrevious>
          <PaginationPageGroup
            isInline
            align="center"
            separator={
              <PaginationSeparator
                isDisabled
                onClick={() => console.warn("I'm clicking the separator")}
                bg="blue.300"
                fontSize="sm"
                w={7}
                jumpSize={11}
              />
            }
          >
            {pages.map((page: number) => (
              <PaginationPage
                w={7}
                bg="red.300"
                key={`pagination_page_${page}`}
                page={page}
                onClick={() => console.warn("Im clicking the page")}
                fontSize="sm"
                _hover={{
                  bg: "green.300",
                }}
                _current={{
                  bg: "green.300",
                  fontSize: "sm",
                  w: 7,
                }}
              />
            ))}
          </PaginationPageGroup>
          <PaginationNext
            _hover={{
              bg: "yellow.400",
            }}
            bg="yellow.300"
            onClick={() => console.warn("I'm clicking the next")}
          >
            <Text>Next</Text>
          </PaginationNext>
        </PaginationContainer>
      </Pagination>
      <Center w="full">
        <Button
          _hover={{
            bg: "purple.400",
          }}
          bg="purple.300"
          onClick={handleDisableClick}
        >
          Disable ON / OFF
        </Button>
        <Select ml={3} onChange={handlePageSizeChange} w={40}>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
        </Select>
      </Center>
      <Grid
        gap={3}
        mt={20}
        px={20}
        templateColumns="repeat(5, 1fr)"
        templateRows="repeat(2, 1fr)"
      >
        {pokemons?.map(({ name }) => (
          <Center key={name} bg="green.100" p={4}>
            <Text>{name}</Text>
          </Center>
        ))}
      </Grid>
    </Stack>
  );
};

export default Full;
```

## 常见问题

### @ajna/pagination 是什么？

目录

### 如何安装 @ajna/pagination？

在项目目录运行 npm install @ajna/pagination，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@chakra-ui/react（^2\.2\.1）、@emotion/react（^11\.9\.0）、@emotion/styled（^11\.8\.1）、framer-motion（^6\.3\.11）、react（^18\.1\.0）、react-dom（^18\.1\.0）、react-scripts（5\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ajna/pagination 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ajna/pagination 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @ajna/pagination 可以商用吗？

@ajna/pagination 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ajna/pagination 的下载量有多少？

根据 npm 官方下载统计，@ajna/pagination 在 2026/10/05 – 2026/11/03 这 30 天内被下载 11,813 次，日均约 394 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ajna/pagination 还在维护吗？

最新版本 1\.4\.19 发布于 2022/06/10（4 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。