COMPONENT 07 · Navigation & Orientation

分页器

Pagination

也叫PagerPage Control分页导航

将长结果集拆成离散页面，并提供页码与前后跳转。

Splits a long result set into pages with numbered and previous/next navigation.

ANATOMY & USAGE

结构与使用建议

组成部分

上一页
页码链接
下一页

适合使用

结果量大且用户需要稳定位置、可分享页码时。

不建议使用

连续浏览体验比定位具体结果更重要时。

键盘与无障碍

用 nav 和可理解的链接文本；当前页使用 aria-current，禁用状态不能仅靠颜色表达。

DESCRIBE IT TO AI

这样告诉编程助手

实现分页器（Pagination）：将长结果集拆成离散页面，并提供页码与前后跳转。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<nav class="demo" aria-label="分页">
  <a href="?page=1">上一页</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">下一页</a>
</nav>