import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={30} style={{ marginBottom: 12 }}></Pagination> <Pagination total={80} style={{ marginBottom: 12 }}></Pagination> <Pagination total={200} style={{ marginBottom: 12 }}></Pagination> <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }}></Pagination> </div> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <Pagination total={30} disabled style={{ marginBottom: 12 }}></Pagination> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={80} showTotal style={{ marginBottom: 12 }}></Pagination> <Pagination total={200} showTotal style={{ marginBottom: 12 }}></Pagination> </div> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination> </div> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={80} showSizeChanger style={{ marginBottom: 12 }}></Pagination> <Pagination total={300} showSizeChanger></Pagination> </div> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }}></Pagination> <Pagination total={300} showQuickJumper></Pagination> </div> );

import React, { useState } from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => { const [page, setPage] = useState(3); function onPageChange(currentPage) { setPage(currentPage); } return ( <Pagination total={200} currentPage={page} onPageChange={onPageChange}> </Pagination> ); };

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <div> <Pagination total={300} showSizeChanger style={{ marginBottom: 12 }} pageSizeOpts={[50, 80, 90, 200]}> </Pagination> <Pagination total={300} showSizeChanger pageSizeOpts={[10, 20, 50, 200]}> </Pagination> </div> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <Pagination total={90} size="small"></Pagination> );

import React from 'react'; import { Pagination } from '@douyinfe/semi-ui'; () => ( <Pagination total={90} size="small" hoverShowPageSelect></Pagination> );