Pagination component
npm install @uiw/react-paginationPagination 分页
===
当数据量较多时，使用分页可以快速进行数据切换，每次只加载一个页面。
``jsx`
import { Pagination } from 'uiw';
// or
import Pagination from '@uiw/react-pagination';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Pagination, Divider } from 'uiw';
export default function Demo() {
const [pageObj, setPageObj] = React.useState({
current: 2,
pageSize: 10
});
return (
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Pagination, Divider } from 'uiw';export default function Demo() {
return (
);
}
`$3
目前有三种对齐方式
、中间(center)、右边(right)。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Pagination, Divider } from 'uiw';export default function Demo() {
return (
total={250}
onChange={(pageNumber) => {
console.log(pageNumber:${pageNumber})
}}
/>
alignment="center"
total={250}
onChange={(pageNumber) => {
console.log(pageNumber:${pageNumber})
}}
/>
alignment="right"
total={250}
onChange={(pageNumber) => {
console.log(pageNumber:${pageNumber})
}}
/>
);
}
`$3
| 参数 | 说明 | 类型 | 默认值 |
|------ |-------- |---------- |-------- |
| current | 当前页数，选中的页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| pageSize | 每页条数 | Number | 10 |
| pageSizeOptions | 指定每页可以显示多少条 | Number[] | - |
| divider | 页码之间是否间隔 | Boolean | - |
| size | 当为
时，是小尺寸分页 | Enum{small, default} | - |
| alignment | 对齐 | Enum{left, center, right} | left` |