mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
e188445b22
* fix(popover): 'arrow. pointAtCenter' misalignment error * chore: add debug demo * chore: update snaphots * chore: update * chore: Reverse components/popover/demo/basic.tsx * chore: update snaphots * chore: skip debug demo test * chore: update demo * chore: update snapshot * chore: skip debug demo test ref: https://github.com/ant-design/ant-design/pull/50260#discussion_r1708926635
87 lines
1.7 KiB
TypeScript
87 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { createStyles } from 'antd-style';
|
|
import { Flex, Popover } from 'antd';
|
|
import type { GetProp } from 'antd';
|
|
|
|
const useStyle = createStyles(() => ({
|
|
item: {
|
|
width: '280px',
|
|
height: '280px',
|
|
display: 'inline-flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
border: '1px dashed purple',
|
|
},
|
|
|
|
box: {
|
|
width: '40px',
|
|
height: '40px',
|
|
backgroundColor: 'deepskyblue',
|
|
},
|
|
|
|
cross: {
|
|
position: 'relative',
|
|
|
|
'&::before, &::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
},
|
|
'&::before': {
|
|
top: '50%',
|
|
height: '1px',
|
|
backgroundColor: 'red',
|
|
},
|
|
'&::after': {
|
|
left: '50%',
|
|
width: '1px',
|
|
backgroundColor: 'blue',
|
|
},
|
|
},
|
|
}));
|
|
|
|
type Placement = GetProp<typeof Popover, 'placement'>;
|
|
|
|
const placements: Placement[] = [
|
|
'topLeft',
|
|
'top',
|
|
'topRight',
|
|
'leftTop',
|
|
'left',
|
|
'leftBottom',
|
|
'rightTop',
|
|
'right',
|
|
'rightBottom',
|
|
'bottomLeft',
|
|
'bottom',
|
|
'bottomRight',
|
|
];
|
|
|
|
const App = () => {
|
|
const { styles, cx } = useStyle();
|
|
return (
|
|
<Flex gap={16} wrap>
|
|
{placements.map((placement) => (
|
|
<div key={placement} className={styles.item}>
|
|
<Popover
|
|
placement={placement}
|
|
content={
|
|
<Flex align="center" justify="center">
|
|
{placement}
|
|
</Flex>
|
|
}
|
|
autoAdjustOverflow={false}
|
|
arrow={{ pointAtCenter: true }}
|
|
forceRender
|
|
open
|
|
>
|
|
<div className={cx(styles.box, styles.cross)} />
|
|
</Popover>
|
|
</div>
|
|
))}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default App;
|