import React from 'react'; import { Button, ConfigProvider, Flex, Popconfirm } from 'antd'; const text = 'Are you sure to delete this task?'; const description = 'Delete the task'; const buttonWidth = 80; const App: React.FC = () => ( <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}> <Flex vertical justify="center" align="center" className="demo"> <Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}> <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> </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' }}> <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> </Flex> </Flex> </ConfigProvider> ); export default App;