For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/components/pagination.md.
A3S UI
  • 简体中文
  • v0.4.0

      • 分页

      Pagination 提供紧凑的分页导航与明确的当前页状态。Office 样式在精确指针下使用 32px 控件，并在粗指针下保留 44px 触控目标。

      实时预览

      用法

      引入 CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      或者只导入基本CSS、分页组件CSS和一个样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/pagination.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Pagination 组件将专用布局契约与 Button 控件组合使用。

      使用CDN或批量程序导入？请参见安装页。

      添加分页 HTML

      使用专用根类、列表、页面链接和 aria-current="page"：

      <nav class="pagination" aria-label="分页">
  <ul>
    <li>
      <a href="?page=1" class="btn" data-variant="ghost" aria-label="上一页">
        <svg data-rtl-flip ...></svg>
        <span data-pagination-label>上一页</span>
      </a>
    </li>
    <li><a href="?page=1" class="btn" data-variant="ghost" data-size="icon" aria-label="第 1 页">1</a></li>
    <li><a href="?page=2" class="btn" data-variant="outline" data-size="icon" aria-label="第 2 页" aria-current="page">2</a></li>
    <li><a href="?page=3" class="btn" data-variant="ghost" data-size="icon" aria-label="第 3 页">3</a></li>
    <li><span data-pagination-ellipsis aria-hidden="true"><svg ...></svg></span></li>
    <li>
      <a href="?page=3" class="btn" data-variant="ghost" aria-label="下一页">
        <span data-pagination-label>下一页</span>
        <svg data-rtl-flip ...></svg>
      </a>
    </li>
  </ul>
</nav>

      示例

      RTL

      分页使用文档方向和逻辑间距。在分页根或父级上设置 dir="rtl"。

      实时预览