分页

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

用途

Include 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或批量程序导入？请参见安装页。

Add your pagination 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"。

#分页

#用途

Include CSS

Add your pagination HTML

#示例

#RTL

分页

用途

示例

RTL