mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
demo: upgrade popover demo
This commit is contained in:
parent
51d32baa62
commit
a3a2bf9c7d
@ -16,29 +16,16 @@ The following example shows how to create a popover which can be hovered and cli
|
|||||||
````jsx
|
````jsx
|
||||||
import { Popover, Button } from 'antd';
|
import { Popover, Button } from 'antd';
|
||||||
|
|
||||||
const hoverContent = (
|
class App extends React.Component {
|
||||||
<div>
|
state = {
|
||||||
This is hover content.
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const clickContent = (
|
|
||||||
<div>
|
|
||||||
This is click content.
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const initalState = {
|
|
||||||
clicked: false,
|
clicked: false,
|
||||||
hovered: false,
|
hovered: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
class App extends React.Component {
|
|
||||||
state = initalState;
|
|
||||||
|
|
||||||
hide = () => {
|
hide = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
...initalState,
|
clicked: false,
|
||||||
|
hovered: false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -57,9 +44,18 @@ class App extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const hoverContent = (
|
||||||
|
<div>
|
||||||
|
This is hover content.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
const clickContent = (
|
||||||
|
<div>
|
||||||
|
This is click content.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
key="1"
|
|
||||||
style={{ width: 500 }}
|
style={{ width: 500 }}
|
||||||
content={hoverContent}
|
content={hoverContent}
|
||||||
title="Hover title"
|
title="Hover title"
|
||||||
@ -68,8 +64,12 @@ class App extends React.Component {
|
|||||||
onVisibleChange={this.handleHoverChange}
|
onVisibleChange={this.handleHoverChange}
|
||||||
>
|
>
|
||||||
<Popover
|
<Popover
|
||||||
key="2"
|
content={(
|
||||||
content={[clickContent, <a onClick={this.hide}>Close</a>]}
|
<div>
|
||||||
|
{clickContent}
|
||||||
|
<a onClick={this.hide}>Close</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
title="Click title"
|
title="Click title"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
visible={this.state.clicked}
|
visible={this.state.clicked}
|
||||||
|
Loading…
Reference in New Issue
Block a user