mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
docs: translated popover demos (#3211)
This commit is contained in:
parent
ce894a60ae
commit
1d71e98dbf
@ -1,28 +1,36 @@
|
||||
---
|
||||
order: 4
|
||||
title: 箭头指向
|
||||
title:
|
||||
zh-CN: 箭头指向
|
||||
en-US: Arrow pointing
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。
|
||||
|
||||
## en-US
|
||||
|
||||
The arrow points to the center of the target element, which set `arrowPointAtCenter`.
|
||||
|
||||
````jsx
|
||||
import { Popover, Button } from 'antd';
|
||||
|
||||
const text = <span>标题</span>;
|
||||
const text = <span>Title</span>;
|
||||
const content = (
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Popover placement="topLeft" title={text} content={content}>
|
||||
<Button>默认对齐元素边缘</Button>
|
||||
<Button>Align edge of element by default.</Button>
|
||||
</Popover>
|
||||
<Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
|
||||
<Button>箭头指向目标元素的中心</Button>
|
||||
<Button>The arrow points to the center of the target element.</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
, mountNode);
|
||||
|
@ -18,14 +18,14 @@ import { Popover, Button } from 'antd';
|
||||
|
||||
const content = (
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Popover content={content} title="标题">
|
||||
<Button type="primary">弹出卡片</Button>
|
||||
<Popover content={content} title="Title">
|
||||
<Button type="primary">Hover me</Button>
|
||||
</Popover>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -33,14 +33,14 @@ const App = React.createClass({
|
||||
render() {
|
||||
const content = (
|
||||
<div>
|
||||
<a onClick={this.hide}>关闭卡片</a>
|
||||
<a onClick={this.hide}>Close</a>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Popover content={content} title="标题" trigger="click"
|
||||
<Popover content={content} title="Title" trigger="click"
|
||||
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
|
||||
>
|
||||
<Button type="primary">点击弹出卡片</Button>
|
||||
<Button type="primary">Cilck me</Button>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
|
@ -16,11 +16,11 @@ There are 12 `placement` options available.
|
||||
````jsx
|
||||
import { Popover, Button } from 'antd';
|
||||
|
||||
const text = <span>标题</span>;
|
||||
const text = <span>Title</span>;
|
||||
const content = (
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -28,46 +28,46 @@ ReactDOM.render(
|
||||
<div>
|
||||
<div style={{ marginLeft: 60 }}>
|
||||
<Popover placement="topLeft" title={text} content={content} trigger="click">
|
||||
<Button>上左</Button>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
<Popover placement="top" title={text} content={content} trigger="click">
|
||||
<Button>上边</Button>
|
||||
<Button>Top</Button>
|
||||
</Popover>
|
||||
<Popover placement="topRight" title={text} content={content} trigger="click">
|
||||
<Button>上右</Button>
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: 60, float: 'left' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} trigger="click">
|
||||
<Button>左上</Button>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} trigger="click">
|
||||
<Button>左边</Button>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} trigger="click">
|
||||
<Button>左下</Button>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: 60, marginLeft: 270 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} trigger="click">
|
||||
<Button>右上</Button>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} trigger="click">
|
||||
<Button>右边</Button>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} trigger="click">
|
||||
<Button>右下</Button>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginLeft: 60, clear: 'both' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
|
||||
<Button>下左</Button>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottom" title={text} content={content} trigger="click">
|
||||
<Button>下边</Button>
|
||||
<Button>Bottom</Button>
|
||||
</Popover>
|
||||
<Popover placement="bottomRight" title={text} content={content} trigger="click">
|
||||
<Button>下右</Button>
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -18,21 +18,21 @@ import { Popover, Button } from 'antd';
|
||||
|
||||
const content = (
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Popover content={content} title="标题" trigger="hover">
|
||||
<Button>移入</Button>
|
||||
<Popover content={content} title="Title" trigger="hover">
|
||||
<Button>Hover me</Button>
|
||||
</Popover>
|
||||
<Popover content={content} title="标题" trigger="focus">
|
||||
<Button>聚焦</Button>
|
||||
<Popover content={content} title="Title" trigger="focus">
|
||||
<Button>Focus me</Button>
|
||||
</Popover>
|
||||
<Popover content={content} title="标题" trigger="click">
|
||||
<Button>点击</Button>
|
||||
<Popover content={content} title="Title" trigger="click">
|
||||
<Button>Click me</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
, mountNode);
|
||||
|
Loading…
Reference in New Issue
Block a user