组件 · COMPONENT
分页 Pagination
26px 方格:当前页墨底白字,其余 .14 描边,省略号不加框。页数多时只留首页、末页和当前页前后各一页。
import { useState } from 'react'
import { Pagination } from './extracted/Pagination.jsx'
export default function PaginationDemo() {
const [page, setPage] = useState(1)
return <Pagination page={page} total={12} onChange={setPage} />
}<nav aria-label="分页" style="display: flex; align-items: center; gap: 6px">
<button
type="button"
class="zzm-page"
aria-label="上一页"
disabled=""
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #8b8b85;
cursor: pointer;
"
>
←
</button>
<span
aria-current="page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: #1d1d1b;
border: 1px solid transparent;
color: #ffffff;
font-weight: 600;
"
>
1
</span>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
2
</button>
<span
aria-hidden="true"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid transparent;
color: #b0b0aa;
"
>
…
</span>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
12
</button>
<button
type="button"
class="zzm-page"
aria-label="下一页"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #8b8b85;
cursor: pointer;
"
>
→
</button>
</nav>/* extracted.css */
.zzm-v4 .zzm-page { transition: border-color .16s ease; }
.zzm-v4 .zzm-page:not(:disabled):hover { border-color: rgba(0, 0, 0, .3) !important; }
.zzm-v4 .zzm-page:disabled { cursor: not-allowed; }
.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}import { Pagination } from './extracted/Pagination.jsx'
export function Static() {
return <Pagination page={6} total={12} />
}<nav aria-label="分页" style="display: flex; align-items: center; gap: 6px">
<button
type="button"
class="zzm-page"
aria-label="上一页"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #8b8b85;
cursor: pointer;
"
>
←
</button>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
1
</button>
<span
aria-hidden="true"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid transparent;
color: #b0b0aa;
"
>
…
</span>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
5
</button>
<span
aria-current="page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: #1d1d1b;
border: 1px solid transparent;
color: #ffffff;
font-weight: 600;
"
>
6
</span>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
7
</button>
<span
aria-hidden="true"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid transparent;
color: #b0b0aa;
"
>
…
</span>
<button
type="button"
class="zzm-page"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #3f3f3b;
cursor: pointer;
"
>
12
</button>
<button
type="button"
class="zzm-page"
aria-label="下一页"
style="
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
padding: 0;
font-family: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #8b8b85;
cursor: pointer;
"
>
→
</button>
</nav>/* extracted.css */
.zzm-v4 .zzm-page { transition: border-color .16s ease; }
.zzm-v4 .zzm-page:not(:disabled):hover { border-color: rgba(0, 0, 0, .3) !important; }
.zzm-v4 .zzm-page:disabled { cursor: not-allowed; }
.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| page | number | 1 | 当前页(从 1 开始,受控) |
| total | number | 1 | 总页数;≤ 7 全部显示 |
| onChange | (page) => void | — | 翻页回调,已夹在 1…total 之间 |