2015-06-17 16:58:13 +08:00
|
|
|
# 位置
|
|
|
|
|
|
|
|
- order: 1
|
|
|
|
|
|
|
|
位置有四个方向。
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
var Popover = antd.Popover;
|
2015-10-08 15:13:04 +08:00
|
|
|
var Button = antd.Button;
|
|
|
|
|
2015-06-17 16:58:13 +08:00
|
|
|
var text = <span>标题</span>;
|
2015-07-08 20:53:11 +08:00
|
|
|
var content = <div>
|
2015-06-17 16:58:13 +08:00
|
|
|
<p>内容</p>
|
2015-07-08 20:53:11 +08:00
|
|
|
<p>内容</p>
|
|
|
|
</div>;
|
2015-06-17 16:58:13 +08:00
|
|
|
|
|
|
|
React.render(<div>
|
|
|
|
<Popover placement="left" title={text} overlay={content}>
|
2015-10-08 15:13:04 +08:00
|
|
|
<Button>左</Button>
|
2015-06-17 16:58:13 +08:00
|
|
|
</Popover>
|
|
|
|
<Popover placement="top" title={text} overlay={content}>
|
2015-10-08 15:13:04 +08:00
|
|
|
<Button>上</Button>
|
2015-06-17 16:58:13 +08:00
|
|
|
</Popover>
|
|
|
|
<Popover placement="bottom" title={text} overlay={content}>
|
2015-10-08 15:13:04 +08:00
|
|
|
<Button>下</Button>
|
2015-06-17 16:58:13 +08:00
|
|
|
</Popover>
|
2015-08-17 17:55:39 +08:00
|
|
|
<Popover placement="right" title={text} overlay={content}>
|
2015-10-08 15:13:04 +08:00
|
|
|
<Button>右</Button>
|
2015-08-17 17:55:39 +08:00
|
|
|
</Popover>
|
2015-06-17 16:58:13 +08:00
|
|
|
</div>, document.getElementById('components-popover-demo-placement'));
|
|
|
|
````
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.code-box-demo .ant-btn {
|
|
|
|
margin-right: 1em;
|
|
|
|
}
|
|
|
|
</style>
|