docs: translated popover demos (#3211)

This commit is contained in:
Shawn Sit 2016-09-29 13:43:55 +08:00 committed by Benjy Cui
parent ce894a60ae
commit 1d71e98dbf
5 changed files with 44 additions and 36 deletions

View File

@ -1,28 +1,36 @@
--- ---
order: 4 order: 4
title: 箭头指向 title:
zh-CN: 箭头指向
en-US: Arrow pointing
--- ---
## zh-CN
设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。 设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。
## en-US
The arrow points to the center of the target element, which set `arrowPointAtCenter`.
````jsx ````jsx
import { Popover, Button } from 'antd'; import { Popover, Button } from 'antd';
const text = <span>标题</span>; const text = <span>Title</span>;
const content = ( const content = (
<div> <div>
<p>内容</p> <p>Content</p>
<p>内容</p> <p>Content</p>
</div> </div>
); );
ReactDOM.render( ReactDOM.render(
<div> <div>
<Popover placement="topLeft" title={text} content={content}> <Popover placement="topLeft" title={text} content={content}>
<Button>默认对齐元素边缘</Button> <Button>Align edge of element by default.</Button>
</Popover> </Popover>
<Popover placement="topLeft" title={text} content={content} arrowPointAtCenter> <Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
<Button>箭头指向目标元素的中心</Button> <Button>The arrow points to the center of the target element.</Button>
</Popover> </Popover>
</div> </div>
, mountNode); , mountNode);

View File

@ -18,14 +18,14 @@ import { Popover, Button } from 'antd';
const content = ( const content = (
<div> <div>
<p>内容</p> <p>Content</p>
<p>内容</p> <p>Content</p>
</div> </div>
); );
ReactDOM.render( ReactDOM.render(
<Popover content={content} title="标题"> <Popover content={content} title="Title">
<Button type="primary">弹出卡片</Button> <Button type="primary">Hover me</Button>
</Popover> </Popover>
, mountNode); , mountNode);
```` ````

View File

@ -33,14 +33,14 @@ const App = React.createClass({
render() { render() {
const content = ( const content = (
<div> <div>
<a onClick={this.hide}>关闭卡片</a> <a onClick={this.hide}>Close</a>
</div> </div>
); );
return ( return (
<Popover content={content} title="标题" trigger="click" <Popover content={content} title="Title" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange} visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
> >
<Button type="primary">点击弹出卡片</Button> <Button type="primary">Cilck me</Button>
</Popover> </Popover>
); );
}, },

View File

@ -16,11 +16,11 @@ There are 12 `placement` options available.
````jsx ````jsx
import { Popover, Button } from 'antd'; import { Popover, Button } from 'antd';
const text = <span>标题</span>; const text = <span>Title</span>;
const content = ( const content = (
<div> <div>
<p>内容</p> <p>Content</p>
<p>内容</p> <p>Content</p>
</div> </div>
); );
@ -28,46 +28,46 @@ ReactDOM.render(
<div> <div>
<div style={{ marginLeft: 60 }}> <div style={{ marginLeft: 60 }}>
<Popover placement="topLeft" title={text} content={content} trigger="click"> <Popover placement="topLeft" title={text} content={content} trigger="click">
<Button>上左</Button> <Button>TL</Button>
</Popover> </Popover>
<Popover placement="top" title={text} content={content} trigger="click"> <Popover placement="top" title={text} content={content} trigger="click">
<Button>上边</Button> <Button>Top</Button>
</Popover> </Popover>
<Popover placement="topRight" title={text} content={content} trigger="click"> <Popover placement="topRight" title={text} content={content} trigger="click">
<Button>上右</Button> <Button>TR</Button>
</Popover> </Popover>
</div> </div>
<div style={{ width: 60, float: 'left' }}> <div style={{ width: 60, float: 'left' }}>
<Popover placement="leftTop" title={text} content={content} trigger="click"> <Popover placement="leftTop" title={text} content={content} trigger="click">
<Button>左上</Button> <Button>LT</Button>
</Popover> </Popover>
<Popover placement="left" title={text} content={content} trigger="click"> <Popover placement="left" title={text} content={content} trigger="click">
<Button>左边</Button> <Button>Left</Button>
</Popover> </Popover>
<Popover placement="leftBottom" title={text} content={content} trigger="click"> <Popover placement="leftBottom" title={text} content={content} trigger="click">
<Button>左下</Button> <Button>LB</Button>
</Popover> </Popover>
</div> </div>
<div style={{ width: 60, marginLeft: 270 }}> <div style={{ width: 60, marginLeft: 270 }}>
<Popover placement="rightTop" title={text} content={content} trigger="click"> <Popover placement="rightTop" title={text} content={content} trigger="click">
<Button>右上</Button> <Button>RT</Button>
</Popover> </Popover>
<Popover placement="right" title={text} content={content} trigger="click"> <Popover placement="right" title={text} content={content} trigger="click">
<Button>右边</Button> <Button>Right</Button>
</Popover> </Popover>
<Popover placement="rightBottom" title={text} content={content} trigger="click"> <Popover placement="rightBottom" title={text} content={content} trigger="click">
<Button>右下</Button> <Button>RB</Button>
</Popover> </Popover>
</div> </div>
<div style={{ marginLeft: 60, clear: 'both' }}> <div style={{ marginLeft: 60, clear: 'both' }}>
<Popover placement="bottomLeft" title={text} content={content} trigger="click"> <Popover placement="bottomLeft" title={text} content={content} trigger="click">
<Button>下左</Button> <Button>BL</Button>
</Popover> </Popover>
<Popover placement="bottom" title={text} content={content} trigger="click"> <Popover placement="bottom" title={text} content={content} trigger="click">
<Button>下边</Button> <Button>Bottom</Button>
</Popover> </Popover>
<Popover placement="bottomRight" title={text} content={content} trigger="click"> <Popover placement="bottomRight" title={text} content={content} trigger="click">
<Button>下右</Button> <Button>BR</Button>
</Popover> </Popover>
</div> </div>
</div> </div>

View File

@ -18,21 +18,21 @@ import { Popover, Button } from 'antd';
const content = ( const content = (
<div> <div>
<p>内容</p> <p>Content</p>
<p>内容</p> <p>Content</p>
</div> </div>
); );
ReactDOM.render( ReactDOM.render(
<div> <div>
<Popover content={content} title="标题" trigger="hover"> <Popover content={content} title="Title" trigger="hover">
<Button>移入</Button> <Button>Hover me</Button>
</Popover> </Popover>
<Popover content={content} title="标题" trigger="focus"> <Popover content={content} title="Title" trigger="focus">
<Button>聚焦</Button> <Button>Focus me</Button>
</Popover> </Popover>
<Popover content={content} title="标题" trigger="click"> <Popover content={content} title="Title" trigger="click">
<Button>点击</Button> <Button>Click me</Button>
</Popover> </Popover>
</div> </div>
, mountNode); , mountNode);