mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Button, Popover } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [clicked, setClicked] = useState(false);
|
||
|
const [hovered, setHovered] = useState(false);
|
||
|
|
||
|
const hide = () => {
|
||
|
setClicked(false);
|
||
|
setHovered(false);
|
||
|
};
|
||
|
|
||
|
const handleHoverChange = (open: boolean) => {
|
||
|
setHovered(open);
|
||
|
setClicked(false);
|
||
|
};
|
||
|
|
||
|
const handleClickChange = (open: boolean) => {
|
||
|
setHovered(false);
|
||
|
setClicked(open);
|
||
|
};
|
||
|
|
||
|
const hoverContent = <div>This is hover content.</div>;
|
||
|
const clickContent = <div>This is click content.</div>;
|
||
|
return (
|
||
|
<Popover
|
||
|
style={{ width: 500 }}
|
||
|
content={hoverContent}
|
||
|
title="Hover title"
|
||
|
trigger="hover"
|
||
|
open={hovered}
|
||
|
onOpenChange={handleHoverChange}
|
||
|
>
|
||
|
<Popover
|
||
|
content={
|
||
|
<div>
|
||
|
{clickContent}
|
||
|
<a onClick={hide}>Close</a>
|
||
|
</div>
|
||
|
}
|
||
|
title="Click title"
|
||
|
trigger="click"
|
||
|
open={clicked}
|
||
|
onOpenChange={handleClickChange}
|
||
|
>
|
||
|
<Button>Hover and click / 悬停并单击</Button>
|
||
|
</Popover>
|
||
|
</Popover>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|