74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { useState } from 'react'
|
||
import { Card, Pagination, Space } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Paginations() {
|
||
const [page, setPage] = useState(1)
|
||
const [longPage, setLongPage] = useState(6)
|
||
|
||
return (
|
||
<Section
|
||
id="pagination"
|
||
title="分页"
|
||
api="Pagination"
|
||
desc="对齐参考站 .page-numbers：32×32 方块、4px 圆角、当前页主色实底白字；页数多时自动用省略号收起。"
|
||
>
|
||
<Demo
|
||
title="基础用法"
|
||
desc="总数 + 每页条数算出页数；上一页/下一页在边界自动禁用。"
|
||
layout="column"
|
||
code={`const [page, setPage] = useState(1)
|
||
|
||
<Pagination page={page} total={42} pageSize={10} onChange={setPage} />`}
|
||
>
|
||
<Space justify="between" wrap>
|
||
<span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>
|
||
第 {page} 页 / 共 5 页
|
||
</span>
|
||
<Pagination page={page} total={42} pageSize={10} onChange={setPage} />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="页数很多"
|
||
desc="当前页左右各留 1 个页码，首尾固定，其余折叠成省略号。"
|
||
layout="column"
|
||
code={`<Pagination page={page} total={200} pageSize={10} onChange={setPage} />`}
|
||
>
|
||
<Pagination page={longPage} total={200} pageSize={10} onChange={setLongPage} />
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="放进卡片底部"
|
||
desc="分页通常和「共 N 条」一起出现，用 Space justify=between 撑开即可。"
|
||
layout="column"
|
||
code={`<Card padding="sm">
|
||
<Space justify="between">
|
||
<span>共 16 条内容</span>
|
||
<Pagination page={page} total={16} pageSize={6} onChange={setPage} />
|
||
</Space>
|
||
</Card>`}
|
||
>
|
||
<Card padding="sm">
|
||
<Space justify="between" wrap>
|
||
<span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>共 16 条内容</span>
|
||
<Pagination page={Math.min(page, 3)} total={16} pageSize={6} onChange={setPage} />
|
||
</Space>
|
||
</Card>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'page', type: 'number', required: true, desc: '当前页，从 1 开始' },
|
||
{ name: 'total', type: 'number', required: true, desc: '总条数' },
|
||
{ name: 'pageSize', type: 'number', defaultValue: '10', desc: '每页条数' },
|
||
{ name: 'onChange', type: '(page: number) => void', required: true, desc: '翻页回调' },
|
||
{ name: 'siblings', type: 'number', defaultValue: '1', desc: '当前页左右各显示几个页码' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|