mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Avatar, List, Radio, Space } from 'antd';
|
|
|
|
type PaginationPosition = 'top' | 'bottom' | 'both';
|
|
|
|
type PaginationAlign = 'start' | 'center' | 'end';
|
|
|
|
const data = [
|
|
{
|
|
title: 'Ant Design Title 1',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 2',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 3',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 4',
|
|
},
|
|
];
|
|
|
|
const positionOptions = ['top', 'bottom', 'both'];
|
|
|
|
const alignOptions = ['start', 'center', 'end'];
|
|
|
|
const App: React.FC = () => {
|
|
const [position, setPosition] = useState<PaginationPosition>('bottom');
|
|
const [align, setAlign] = useState<PaginationAlign>('center');
|
|
|
|
return (
|
|
<>
|
|
<Space direction="vertical" style={{ marginBottom: '20px' }} size="middle">
|
|
<Space>
|
|
<span>Pagination Position:</span>
|
|
<Radio.Group
|
|
optionType="button"
|
|
value={position}
|
|
onChange={(e) => {
|
|
setPosition(e.target.value);
|
|
}}
|
|
>
|
|
{positionOptions.map((item) => (
|
|
<Radio.Button key={item} value={item}>
|
|
{item}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</Space>
|
|
<Space>
|
|
<span>Pagination Align:</span>
|
|
<Radio.Group
|
|
optionType="button"
|
|
value={align}
|
|
onChange={(e) => {
|
|
setAlign(e.target.value);
|
|
}}
|
|
>
|
|
{alignOptions.map((item) => (
|
|
<Radio.Button key={item} value={item}>
|
|
{item}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</Space>
|
|
</Space>
|
|
<List
|
|
pagination={{ position, align }}
|
|
dataSource={data}
|
|
renderItem={(item, index) => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
|
|
title={<a href="https://ant.design">{item.title}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|