分页

pagination

纯样式契约（翻页逻辑归消费方）：1 … 4 [5] 6 … 12 静态演示，含禁用态与省略号。

示例

<nav class="pagination" aria-label="分页">
  <button class="page-btn motion is-disabled" aria-label="上一页">‹</button>
  <button class="page-btn motion">1</button>
  <span class="page-ellipsis">…</span>
  <button class="page-btn motion">4</button>
  <button class="page-btn motion is-active" aria-current="page">5</button>
  <button class="page-btn motion">6</button>
  <span class="page-ellipsis">…</span>
  <button class="page-btn motion">12</button>
  <button class="page-btn motion" aria-label="下一页">›</button>
</nav>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/pagination.css';

用法

<nav class="pagination" aria-label="分页">
  <button class="page-btn motion is-disabled" aria-label="上一页">‹</button>
  <button class="page-btn motion is-active" aria-current="page">1</button>
  <button class="page-btn motion" aria-label="下一页">›</button>
</nav>