# 分页 Pagination

分类：导航 · React：Pagination

页码、上一页 / 下一页、每页条数；JS 按 data-total 生成按钮，派发 xxd:change。

## 示例
```html
<div class="xxd-pagination-bar">
  <span class="xxd-pagination__info"></span>
  <nav class="xxd-pagination" data-xxd-pagination data-page="3" data-total="230" data-per-page="20" aria-label="分页"></nav>
  <label class="xxd-pagination__size">每页<span class="xxd-select" data-size="sm"><select><option>20</option><option>50</option></select></span></label>
</div>
<nav class="xxd-pagination" data-simple aria-label="分页（简洁）"><button aria-label="上一页"><i data-xxd-icon="ChevronLeft" data-size="14"></i></button><button aria-current="page">2</button><button aria-label="下一页"><i data-xxd-icon="ChevronRight" data-size="14"></i></button></nav>
```

## 属性与类名
- `data-xxd-pagination`：按 data-page / data-total / data-per-page 生成按钮
- `data-simple`：只留上一页 / 下一页
- 类名：`xxd-pagination` `xxd-pagination__gap` `xxd-pagination-bar` `xxd-pagination__info` `xxd-pagination__size`

## JS
```js
nav.addEventListener("xxd:change", (e) => e.detail.page)
Xxd.renderPagination(nav, { page: 1, total: 230, perPage: 20 })
```

## 键盘与读屏
- <nav> 写 aria-label；当前页 aria-current="page"；上一页 / 下一页按钮有文字标签（三语）
- 首页和末页时对应按钮 disabled