mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
demo: improve popconfirm/popover/tootlip placement demo code style (#45581)
This commit is contained in:
afc163
GitHub
parent
2dbc6abce8
commit
7e284736a8
@ -40,6 +40,9 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
.code-box-demo {
|
||||
background-color: ${token.colorBgContainer};
|
||||
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
|
||||
> .demo {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown {
|
||||
|
||||
@ -538,12 +538,15 @@ Array [
|
||||
exports[`renders components/popconfirm/demo/locale.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/popconfirm/demo/placement.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div
|
||||
style="margin-left: 70px; white-space: nowrap;"
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -617,6 +620,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -625,6 +629,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -639,6 +644,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -712,6 +718,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -720,6 +727,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -734,6 +742,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -807,6 +816,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -815,6 +825,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -827,12 +838,13 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="width: 70px; float: left;"
|
||||
style="width: 80px; float: inline-start;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -906,6 +918,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -914,6 +927,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -928,6 +942,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1001,6 +1016,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1009,6 +1025,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1023,6 +1040,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1096,6 +1114,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1104,6 +1123,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1116,12 +1136,13 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="width: 70px; margin-left: 304px;"
|
||||
style="width: 80px; margin-inline-start: 344px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1195,6 +1216,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1203,6 +1225,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1217,6 +1240,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1290,6 +1314,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1298,6 +1323,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1312,6 +1338,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1385,6 +1412,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1393,6 +1421,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1405,12 +1434,13 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 70px; clear: both; white-space: nowrap;"
|
||||
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1484,6 +1514,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1492,6 +1523,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1506,6 +1538,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1579,6 +1612,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1587,6 +1621,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1601,6 +1636,7 @@ Array [
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1674,6 +1710,7 @@ Array [
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1682,6 +1719,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1694,8 +1732,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/popconfirm/demo/placement.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -81,12 +81,15 @@ exports[`renders components/popconfirm/demo/locale.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -95,6 +98,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -103,18 +107,20 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;float:left"
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -123,6 +129,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -131,18 +138,20 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;margin-left:304px"
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -151,6 +160,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -159,18 +169,20 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:70px;clear:both;white-space:nowrap"
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -179,6 +191,7 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -187,14 +200,15 @@ Array [
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/popconfirm/demo/promise.tsx correctly 1`] = `
|
||||
|
||||
@ -1,144 +1,135 @@
|
||||
import React from 'react';
|
||||
import { Button, message, Popconfirm } from 'antd';
|
||||
import { Button, Popconfirm, ConfigProvider } from 'antd';
|
||||
|
||||
const text = 'Are you sure to delete this task?';
|
||||
const description = 'Delete the task';
|
||||
|
||||
const confirm = () => {
|
||||
message.info('Clicked on Yes.');
|
||||
};
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<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>
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, 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>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<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>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', 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>
|
||||
</div>
|
||||
</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>
|
||||
</>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-segmented"
|
||||
style="margin-bottom:24px"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
@ -54,130 +53,136 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
|
||||
role="separator"
|
||||
class="demo"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
<div
|
||||
style="margin-inline-start:84px;white-space:nowrap"
|
||||
>
|
||||
Content
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;float:left"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;margin-left:304px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:70px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/popover/demo/basic.tsx correctly 1`] = `
|
||||
@ -287,12 +292,15 @@ exports[`renders components/popover/demo/hover-with-click.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div
|
||||
style="margin-left:70px;white-space:nowrap"
|
||||
style="margin-inline-start:84px;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -301,6 +309,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -309,6 +318,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -317,10 +327,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;float:left"
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -329,6 +340,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -337,6 +349,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -345,10 +358,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:70px;margin-left:304px"
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -357,6 +371,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -365,6 +380,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -373,10 +389,11 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:70px;clear:both;white-space:nowrap"
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -385,6 +402,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -393,6 +411,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -5,23 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Hide arrow by `arrow`.
|
||||
|
||||
<style>
|
||||
.code-box-demo .demo {
|
||||
overflow: auto;
|
||||
}
|
||||
.code-box-demo .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.code-box-demo .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#components-popover-demo-arrow .ant-btn {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Button, Divider, Popover, Segmented } from 'antd';
|
||||
import { Button, Popover, Segmented, ConfigProvider } from 'antd';
|
||||
|
||||
const text = <span>Title</span>;
|
||||
const content = (
|
||||
@ -9,72 +9,86 @@ const content = (
|
||||
</div>
|
||||
);
|
||||
|
||||
const buttonWidth = 70;
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [showArrow, setShowArrow] = useState(true);
|
||||
const [arrowAtCenter, setArrowAtCenter] = useState(false);
|
||||
const options = ['Show', 'Hide', 'Center'];
|
||||
const [arrow, setArrow] = useState('Show');
|
||||
|
||||
const mergedArrow = useMemo(() => {
|
||||
if (arrowAtCenter) return { pointAtCenter: true };
|
||||
return showArrow;
|
||||
}, [showArrow, arrowAtCenter]);
|
||||
if (arrow === 'Hide') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (arrow === 'Show') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return {
|
||||
pointAtCenter: true,
|
||||
};
|
||||
}, [arrow]);
|
||||
|
||||
return (
|
||||
<div className="demo">
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<Segmented
|
||||
options={['Show', 'Hide', 'Center']}
|
||||
onChange={(val) => {
|
||||
setShowArrow(val !== 'Hide');
|
||||
setArrowAtCenter(val === 'Center');
|
||||
options={options}
|
||||
onChange={(val: string) => {
|
||||
setArrow(val);
|
||||
}}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<Divider orientation="center">Content</Divider>
|
||||
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
<Popover placement="top" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Top</Button>
|
||||
</Popover>
|
||||
<Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
<Popover placement="top" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Top</Button>
|
||||
</Popover>
|
||||
<Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Bottom</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'left' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Bottom</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,18 +5,3 @@
|
||||
## en-US
|
||||
|
||||
There are 12 `placement` options available.
|
||||
|
||||
<style>
|
||||
#components-popover-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#components-popover-demo-placement .ant-btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, Popover } from 'antd';
|
||||
import { Button, Popover, ConfigProvider } from 'antd';
|
||||
|
||||
const text = <span>Title</span>;
|
||||
|
||||
@ -10,55 +10,61 @@ const content = (
|
||||
</div>
|
||||
);
|
||||
|
||||
const buttonWidth = 70;
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div>
|
||||
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} trigger="click">
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
<Popover placement="top" title={text} content={content} trigger="click">
|
||||
<Button>Top</Button>
|
||||
</Popover>
|
||||
<Popover placement="topRight" title={text} content={content} trigger="click">
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} trigger="click">
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
<Popover placement="top" title={text} content={content} trigger="click">
|
||||
<Button>Top</Button>
|
||||
</Popover>
|
||||
<Popover placement="topRight" title={text} content={content} trigger="click">
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} trigger="click">
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} trigger="click">
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} trigger="click">
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} trigger="click">
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} trigger="click">
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} trigger="click">
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottom" title={text} content={content} trigger="click">
|
||||
<Button>Bottom</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottomRight" title={text} content={content} trigger="click">
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'left' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} trigger="click">
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} trigger="click">
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} trigger="click">
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} trigger="click">
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} trigger="click">
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} trigger="click">
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottom" title={text} content={content} trigger="click">
|
||||
<Button>Bottom</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottomRight" title={text} content={content} trigger="click">
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-segmented"
|
||||
style="margin-bottom: 24px;"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
@ -54,388 +53,388 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
|
||||
role="separator"
|
||||
class="demo"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Content
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 78px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
style="width: 80px; float: inline-start;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-topRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
style="width: 80px; margin-inline-start: 344px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 78px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 2`] = `[]`;
|
||||
@ -1631,13 +1630,15 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1
|
||||
exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div
|
||||
style="display: flex; margin-left: 78px; white-space: nowrap; column-gap: 8px;"
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1667,7 +1668,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1697,7 +1698,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1727,11 +1728,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; flex-direction: column; width: 78px; float: left; row-gap: 8px;"
|
||||
style="width: 80px; float: inline-start;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1761,7 +1762,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1791,7 +1792,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1821,11 +1822,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; flex-direction: column; width: 78px; margin-left: 336px; row-gap: 8px;"
|
||||
style="width: 80px; margin-inline-start: 344px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1855,7 +1856,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1885,7 +1886,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1915,11 +1916,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; margin-left: 78px; clear: both; white-space: nowrap; column-gap: 8px;"
|
||||
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1949,7 +1950,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1979,7 +1980,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-segmented"
|
||||
style="margin-bottom:24px"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
@ -54,136 +53,136 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
|
||||
role="separator"
|
||||
class="demo"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
<div
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
>
|
||||
Content
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:78px;display:flex;flex-wrap:nowrap;column-gap:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<span>
|
||||
TL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<span>
|
||||
Top
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<span>
|
||||
TR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:78px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BL
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Bottom
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
BR
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/tooltip/demo/arrow-point-at-center.tsx correctly 1`] = `
|
||||
@ -724,13 +723,15 @@ exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="demo"
|
||||
>
|
||||
<div
|
||||
style="display:flex;margin-left:78px;white-space:nowrap;column-gap:8px"
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -739,7 +740,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -748,7 +749,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -757,11 +758,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="display:flex;flex-direction:column;width:78px;float:left;row-gap:8px"
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -770,7 +771,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -779,7 +780,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -788,11 +789,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="display:flex;flex-direction:column;width:78px;margin-left:336px;row-gap:8px"
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -801,7 +802,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -810,7 +811,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -819,11 +820,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="display:flex;margin-left:78px;clear:both;white-space:nowrap;column-gap:8px"
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -832,7 +833,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -841,7 +842,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Button, Divider, Segmented, Tooltip } from 'antd';
|
||||
import { Button, Segmented, Tooltip, ConfigProvider } from 'antd';
|
||||
|
||||
const text = <span>prompt text</span>;
|
||||
|
||||
const buttonWidth = 78;
|
||||
const gap = 8;
|
||||
|
||||
const btnProps = {
|
||||
style: {
|
||||
width: buttonWidth,
|
||||
},
|
||||
};
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const options = ['Show', 'Hide', 'Center'];
|
||||
@ -31,84 +24,66 @@ const App: React.FC = () => {
|
||||
}, [arrow]);
|
||||
|
||||
return (
|
||||
<div className="demo">
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth },
|
||||
}}
|
||||
>
|
||||
<Segmented
|
||||
value={arrow}
|
||||
options={options}
|
||||
onChange={(val: string) => {
|
||||
setArrow(val);
|
||||
}}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<Divider orientation="center">Content</Divider>
|
||||
<div style={{ marginLeft: buttonWidth, display: 'flex', flexWrap: 'nowrap', columnGap: gap }}>
|
||||
<Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>TR</Button>
|
||||
</Tooltip>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text} arrow={mergedArrow}>
|
||||
<Button>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text} arrow={mergedArrow}>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text} arrow={mergedArrow}>
|
||||
<Button>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
|
||||
<Button>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: buttonWidth,
|
||||
float: 'left',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: buttonWidth,
|
||||
marginLeft: buttonWidth * 4 + 24,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: buttonWidth,
|
||||
clear: 'both',
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
columnGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,18 +5,3 @@
|
||||
## en-US
|
||||
|
||||
There are 12 placement options available.
|
||||
|
||||
<style>
|
||||
#components-tooltip-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#components-tooltip-demo-placement .ant-btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,88 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { Button, Tooltip, ConfigProvider } from 'antd';
|
||||
|
||||
const text = <span>prompt text</span>;
|
||||
|
||||
const buttonWidth = 78;
|
||||
const gap = 8;
|
||||
|
||||
const btnProps = {
|
||||
style: {
|
||||
width: buttonWidth,
|
||||
},
|
||||
};
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div>
|
||||
<div style={{ display: 'flex', marginLeft: buttonWidth, whiteSpace: 'nowrap', columnGap: gap }}>
|
||||
<Tooltip placement="topLeft" title={text}>
|
||||
<Button {...btnProps}>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text}>
|
||||
<Button {...btnProps}>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text}>
|
||||
<Button {...btnProps}>TR</Button>
|
||||
</Tooltip>
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text}>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text}>
|
||||
<Button>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text}>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text}>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text}>
|
||||
<Button>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text}>
|
||||
<Button>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: buttonWidth,
|
||||
float: 'left',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="leftTop" title={text}>
|
||||
<Button {...btnProps}>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text}>
|
||||
<Button {...btnProps}>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text}>
|
||||
<Button {...btnProps}>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: buttonWidth,
|
||||
marginLeft: buttonWidth * 4 + 24,
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="rightTop" title={text}>
|
||||
<Button {...btnProps}>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text}>
|
||||
<Button {...btnProps}>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text}>
|
||||
<Button {...btnProps}>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
marginLeft: buttonWidth,
|
||||
clear: 'both',
|
||||
whiteSpace: 'nowrap',
|
||||
columnGap: gap,
|
||||
}}
|
||||
>
|
||||
<Tooltip placement="bottomLeft" title={text}>
|
||||
<Button {...btnProps}>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text}>
|
||||
<Button {...btnProps}>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text}>
|
||||
<Button {...btnProps}>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user