---
title: 分页 Pagination
url: https://ui.zhaozimin.com/components/pagination/
markdown: https://ui.zhaozimin.com/components/pagination.md
group: 组件
origin: 提炼层组件（src/extracted），本仓库是唯一源头
source:
  - src/extracted/Pagination.jsx  # https://ui.zhaozimin.com/src/extracted/Pagination.jsx
  - src/extracted/extracted.css  # https://ui.zhaozimin.com/src/extracted/extracted.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 分页 Pagination

> 26px 方格：当前页墨底白字，其余 .14 描边，省略号不加框。页数多时只留首页、末页和当前页前后各一页。

### 样张 · 点一下试试

React：

```jsx
import { useState } from 'react'
import { Pagination } from './extracted/Pagination.jsx'

export default function PaginationDemo() {
  const [page, setPage] = useState(1)
  return <Pagination page={page} total={12} onChange={setPage} />
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<nav aria-label="分页" style="display: flex; align-items: center; gap: 6px">
  <button
    type="button"
    class="zzm-page"
    aria-label="上一页"
    disabled=""
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #8b8b85;
      cursor: pointer;
    "
  >
    ←
  </button>
  <span
    aria-current="page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: #1d1d1b;
      border: 1px solid transparent;
      color: #ffffff;
      font-weight: 600;
    "
  >
    1
  </span>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    2
  </button>
  <span
    aria-hidden="true"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid transparent;
      color: #b0b0aa;
    "
  >
    …
  </span>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    12
  </button>
  <button
    type="button"
    class="zzm-page"
    aria-label="下一页"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #8b8b85;
      cursor: pointer;
    "
  >
    →
  </button>
</nav>
```

### 样张 · 第 6 页 / 共 12 页

React：

```jsx
import { Pagination } from './extracted/Pagination.jsx'

export function Static() {
  return <Pagination page={6} total={12} />
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<nav aria-label="分页" style="display: flex; align-items: center; gap: 6px">
  <button
    type="button"
    class="zzm-page"
    aria-label="上一页"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #8b8b85;
      cursor: pointer;
    "
  >
    ←
  </button>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    1
  </button>
  <span
    aria-hidden="true"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid transparent;
      color: #b0b0aa;
    "
  >
    …
  </span>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    5
  </button>
  <span
    aria-current="page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: #1d1d1b;
      border: 1px solid transparent;
      color: #ffffff;
      font-weight: 600;
    "
  >
    6
  </span>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    7
  </button>
  <span
    aria-hidden="true"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid transparent;
      color: #b0b0aa;
    "
  >
    …
  </span>
  <button
    type="button"
    class="zzm-page"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #3f3f3b;
      cursor: pointer;
    "
  >
    12
  </button>
  <button
    type="button"
    class="zzm-page"
    aria-label="下一页"
    style="
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 0;
      font-family: inherit;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.14);
      color: #8b8b85;
      cursor: pointer;
    "
  >
    →
  </button>
</nav>
```

## 属性

| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `page` | number | 1 | 当前页（从 1 开始，受控） |
| `total` | number | 1 | 总页数；≤ 7 全部显示 |
| `onChange` | (page) => void | — | 翻页回调，已夹在 1…total 之间 |

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* extracted.css */

.zzm-v4 .zzm-page { transition: border-color .16s ease; }

.zzm-v4 .zzm-page:not(:disabled):hover { border-color: rgba(0, 0, 0, .3) !important; }

.zzm-v4 .zzm-page:disabled { cursor: not-allowed; }

.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}
```

---

上一页：[标签页](https://ui.zhaozimin.com/components/tabs.md) · 下一页：[确认窗](https://ui.zhaozimin.com/components/dialog.md) · 全站目录：https://ui.zhaozimin.com/llms.txt