2023-01-19 15:37:54 +08:00
|
|
|
import React from 'react';
|
2024-08-09 11:24:29 +08:00
|
|
|
import { Button, ConfigProvider, Flex, Popconfirm } from 'antd';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const text = 'Are you sure to delete this task?';
|
2022-12-08 16:39:42 +08:00
|
|
|
const description = 'Delete the task';
|
2023-10-30 13:57:57 +08:00
|
|
|
const buttonWidth = 80;
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const App: React.FC = () => (
|
2024-08-09 11:24:29 +08:00
|
|
|
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
|
|
|
|
<Flex vertical justify="center" align="center" className="demo">
|
|
|
|
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
2023-10-30 13:57:57 +08:00
|
|
|
<Popconfirm
|
|
|
|
placement="topLeft"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>TL</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="top"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>Top</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="topRight"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>TR</Button>
|
|
|
|
</Popconfirm>
|
2024-08-09 11:24:29 +08:00
|
|
|
</Flex>
|
|
|
|
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
|
|
|
<Flex align="center" vertical>
|
|
|
|
<Popconfirm
|
|
|
|
placement="leftTop"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>LT</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="left"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>Left</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="leftBottom"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>LB</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
</Flex>
|
|
|
|
<Flex align="center" vertical>
|
|
|
|
<Popconfirm
|
|
|
|
placement="rightTop"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>RT</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="right"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>Right</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="rightBottom"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>RB</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
2023-10-30 13:57:57 +08:00
|
|
|
<Popconfirm
|
|
|
|
placement="bottomLeft"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>BL</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="bottom"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>Bottom</Button>
|
|
|
|
</Popconfirm>
|
|
|
|
<Popconfirm
|
|
|
|
placement="bottomRight"
|
|
|
|
title={text}
|
|
|
|
description={description}
|
|
|
|
okText="Yes"
|
|
|
|
cancelText="No"
|
|
|
|
>
|
|
|
|
<Button>BR</Button>
|
|
|
|
</Popconfirm>
|
2024-08-09 11:24:29 +08:00
|
|
|
</Flex>
|
|
|
|
</Flex>
|
2023-10-30 13:57:57 +08:00
|
|
|
</ConfigProvider>
|
2022-11-09 12:28:04 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
export default App;
|