ant-design/components/pagination/design/demo/mini.tsx
lijianan 84ce358d10
site: add BehaviorPattern for en page (#54254)
* site: add BehaviorPattern for en page

* site: add BehaviorPattern for en page

* fix: fix
2025-07-02 10:52:54 +08:00

34 lines
1 KiB
TypeScript

import React from 'react';
import { Flex, Pagination } from 'antd';
import useLocale from '../../../../.dumi/hooks/useLocale';
const locales = {
cn: {
total: (total: number, current: string | number) => `${current} 条 / 共 ${total}`,
},
en: {
total: (total: number, current: string | number) => `${current} of ${total} items`,
},
};
const App: React.FC = () => {
const [locale] = useLocale(locales);
return (
<Flex vertical gap="middle">
<Pagination defaultCurrent={1} total={50} showSizeChanger={false} size="small" />
<Pagination defaultCurrent={1} total={100} showSizeChanger={false} size="small" />
<Pagination defaultCurrent={1} total={100} size="small" />
<Pagination defaultCurrent={1} total={100} showQuickJumper size="small" />
<Pagination
defaultCurrent={1}
total={100}
showQuickJumper
size="small"
showTotal={(total, range) => locale.total(total, range.join('-'))}
/>
</Flex>
);
};
export default App;