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,21 +1,22 @@
|
||||
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' }}>
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -25,7 +26,6 @@ const App: React.FC = () => (
|
||||
placement="top"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -35,19 +35,17 @@ const App: React.FC = () => (
|
||||
placement="topRight"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>TR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: 70, float: 'left' }}>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popconfirm
|
||||
placement="leftTop"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -57,7 +55,6 @@ const App: React.FC = () => (
|
||||
placement="left"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -67,19 +64,17 @@ const App: React.FC = () => (
|
||||
placement="leftBottom"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>LB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: 70, marginLeft: 304 }}>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popconfirm
|
||||
placement="rightTop"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -89,7 +84,6 @@ const App: React.FC = () => (
|
||||
placement="right"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -99,19 +93,17 @@ const App: React.FC = () => (
|
||||
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' }}>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm
|
||||
placement="bottomLeft"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -121,7 +113,6 @@ const App: React.FC = () => (
|
||||
placement="bottom"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
@ -131,14 +122,14 @@ const App: React.FC = () => (
|
||||
placement="bottomRight"
|
||||
title={text}
|
||||
description={description}
|
||||
onConfirm={confirm}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>BR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/popover/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,22 +53,16 @@ exports[`renders components/popover/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: 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>
|
||||
@ -115,6 +108,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -160,6 +154,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -205,10 +200,11 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</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>
|
||||
@ -254,6 +250,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -299,6 +296,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -344,10 +342,11 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</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>
|
||||
@ -393,6 +392,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -438,6 +438,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -483,10 +484,11 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</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>
|
||||
@ -532,6 +534,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -577,6 +580,7 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -621,7 +625,8 @@ exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/popover/demo/arrow.tsx extend context correctly 2`] = `[]`;
|
||||
@ -877,12 +882,15 @@ Array [
|
||||
exports[`renders components/popover/demo/hover-with-click.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/popover/demo/placement.tsx extend context 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>
|
||||
@ -928,6 +936,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -973,6 +982,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1018,10 +1028,11 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</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>
|
||||
@ -1067,6 +1078,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1112,6 +1124,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1157,10 +1170,11 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</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>
|
||||
@ -1206,6 +1220,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1251,6 +1266,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1296,10 +1312,11 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</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>
|
||||
@ -1345,6 +1362,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -1390,6 +1408,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -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,22 +53,16 @@ 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"
|
||||
>
|
||||
Content
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
@ -78,6 +71,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -86,6 +80,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -94,10 +89,11 @@ exports[`renders components/popover/demo/arrow.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>
|
||||
@ -106,6 +102,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -114,6 +111,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -122,10 +120,11 @@ exports[`renders components/popover/demo/arrow.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>
|
||||
@ -134,6 +133,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -142,6 +142,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -150,10 +151,11 @@ exports[`renders components/popover/demo/arrow.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>
|
||||
@ -162,6 +164,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -170,6 +173,7 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -177,7 +181,8 @@ exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</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,28 +9,41 @@ 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">
|
||||
<Segmented
|
||||
options={['Show', 'Hide', 'Center']}
|
||||
onChange={(val) => {
|
||||
setShowArrow(val !== 'Hide');
|
||||
setArrowAtCenter(val === 'Center');
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<Segmented
|
||||
options={options}
|
||||
onChange={(val: string) => {
|
||||
setArrow(val);
|
||||
}}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<Divider orientation="center">Content</Divider>
|
||||
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
@ -41,7 +54,7 @@ const App: React.FC = () => {
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'left' }}>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
@ -52,7 +65,7 @@ const App: React.FC = () => {
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
@ -63,7 +76,7 @@ const App: React.FC = () => {
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
@ -75,6 +88,7 @@ const App: React.FC = () => {
|
||||
</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,11 +10,16 @@ const content = (
|
||||
</div>
|
||||
);
|
||||
|
||||
const buttonWidth = 70;
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div>
|
||||
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<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>
|
||||
@ -25,7 +30,7 @@ const App: React.FC = () => (
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'left' }}>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} trigger="click">
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
@ -36,7 +41,7 @@ const App: React.FC = () => (
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} trigger="click">
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
@ -47,7 +52,7 @@ const App: React.FC = () => (
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
@ -59,6 +64,7 @@ const App: React.FC = () => (
|
||||
</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,23 +53,16 @@ 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;"
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -100,7 +92,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -130,7 +122,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -160,10 +152,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
|
||||
style="width: 80px; float: inline-start;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -193,6 +186,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -222,6 +216,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -251,10 +246,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
|
||||
style="width: 80px; margin-inline-start: 344px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -284,6 +280,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -313,6 +310,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -342,11 +340,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 78px; clear: both; display: flex; flex-wrap: 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;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -376,7 +374,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -406,7 +404,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 78px;"
|
||||
style="width: 80px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -435,7 +433,8 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
|
||||
</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,23 +53,16 @@ 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"
|
||||
>
|
||||
Content
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:78px;display:flex;flex-wrap: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"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -79,7 +71,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -88,7 +80,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -97,10 +89,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
|
||||
style="width:80px;float:inline-start"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -109,6 +102,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -117,6 +111,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -125,10 +120,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
|
||||
style="width:80px;margin-inline-start:344px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -137,6 +133,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -145,6 +142,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -153,11 +151,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left:78px;clear:both;display:flex;flex-wrap: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"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -166,7 +164,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -175,7 +173,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:78px"
|
||||
style="width:80px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -183,7 +181,8 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</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,35 +24,32 @@ 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 }}>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>TL</Button>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>Top</Button>
|
||||
<Button>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>TR</Button>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: buttonWidth,
|
||||
float: 'left',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
@ -70,15 +60,7 @@ const App: React.FC = () => {
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: buttonWidth,
|
||||
marginLeft: buttonWidth * 4 + 24,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
@ -89,26 +71,19 @@ const App: React.FC = () => {
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: buttonWidth,
|
||||
clear: 'both',
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
columnGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>BL</Button>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>Bottom</Button>
|
||||
<Button>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
|
||||
<Button {...btnProps}>BR</Button>
|
||||
<Button>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 }}>
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text}>
|
||||
<Button {...btnProps}>TL</Button>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" title={text}>
|
||||
<Button {...btnProps}>Top</Button>
|
||||
<Button>Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight" title={text}>
|
||||
<Button {...btnProps}>TR</Button>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: buttonWidth,
|
||||
float: 'left',
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text}>
|
||||
<Button {...btnProps}>LT</Button>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text}>
|
||||
<Button {...btnProps}>Left</Button>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text}>
|
||||
<Button {...btnProps}>LB</Button>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: buttonWidth,
|
||||
marginLeft: buttonWidth * 4 + 24,
|
||||
rowGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text}>
|
||||
<Button {...btnProps}>RT</Button>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text}>
|
||||
<Button {...btnProps}>Right</Button>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text}>
|
||||
<Button {...btnProps}>RB</Button>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
marginLeft: buttonWidth,
|
||||
clear: 'both',
|
||||
whiteSpace: 'nowrap',
|
||||
columnGap: gap,
|
||||
}}
|
||||
>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text}>
|
||||
<Button {...btnProps}>BL</Button>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom" title={text}>
|
||||
<Button {...btnProps}>Bottom</Button>
|
||||
<Button>Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight" title={text}>
|
||||
<Button {...btnProps}>BR</Button>
|
||||
<Button>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user