mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
8ae56f2371
* feat: tooltip support arrow.pointAtCenter * test: rm only * fix: Popover * fix: rm popover arrow logic * test: update test * chore: skip debug demo test
116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import { Button, Divider, Segmented, Tooltip } from 'antd';
|
|
import React, { useMemo, useState } from 'react';
|
|
|
|
const text = <span>prompt text</span>;
|
|
|
|
const buttonWidth = 70;
|
|
const gap = 8;
|
|
|
|
const btnProps = {
|
|
style: {
|
|
width: buttonWidth,
|
|
},
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const options = ['Show', 'Hide', 'Center'];
|
|
const [arrow, setArrow] = useState('Show');
|
|
|
|
const mergedArrow = useMemo(() => {
|
|
if (arrow === 'Hide') {
|
|
return false;
|
|
}
|
|
|
|
if (arrow === 'Show') {
|
|
return true;
|
|
}
|
|
|
|
return {
|
|
pointAtCenter: true,
|
|
};
|
|
}, [arrow]);
|
|
|
|
return (
|
|
<div className="demo">
|
|
<Segmented
|
|
value={arrow}
|
|
options={options}
|
|
onChange={(val: string) => {
|
|
setArrow(val);
|
|
}}
|
|
/>
|
|
<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>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default App;
|