mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
451d2f6ee2
* feat(popconfirm): make title bold and add description prop * feat(popconfirm): make title bold and add description prop(update demos) * feat(popconfirm): make title bold and add description prop(the update of demos translation) * feat(popconfirm): make title bold and add description prop(the update of snapshot) * feat(popconfirm): make title bold and add description prop(the update of popconfirm md) * feat(popconfirm): make title bold and add description prop(the update of popconfirm md)2 * feat(popconfirm): make title bold and add description prop(run all test.ts.snaps and update popconfirm)
145 lines
3.3 KiB
TypeScript
145 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Button, message, Popconfirm } from 'antd';
|
|
|
|
const text = 'Are you sure to delete this task?';
|
|
const description = 'Delete the task';
|
|
|
|
const confirm = () => {
|
|
message.info('Clicked on Yes.');
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<div className="demo">
|
|
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
|
|
<Popconfirm
|
|
placement="topLeft"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>TL</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="top"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>Top</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="topRight"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>TR</Button>
|
|
</Popconfirm>
|
|
</div>
|
|
<div style={{ width: 70, float: 'left' }}>
|
|
<Popconfirm
|
|
placement="leftTop"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>LT</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="left"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>Left</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="leftBottom"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>LB</Button>
|
|
</Popconfirm>
|
|
</div>
|
|
<div style={{ width: 70, marginLeft: 304 }}>
|
|
<Popconfirm
|
|
placement="rightTop"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>RT</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="right"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>Right</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="rightBottom"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>RB</Button>
|
|
</Popconfirm>
|
|
</div>
|
|
<div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
|
|
<Popconfirm
|
|
placement="bottomLeft"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>BL</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="bottom"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>Bottom</Button>
|
|
</Popconfirm>
|
|
<Popconfirm
|
|
placement="bottomRight"
|
|
title={text}
|
|
description={description}
|
|
onConfirm={confirm}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
>
|
|
<Button>BR</Button>
|
|
</Popconfirm>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default App;
|