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
|
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);
|
||||||
|
@ -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);
|
||||||
````
|
````
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user