mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

update tooltip and placement demo

Browse Source
This commit is contained in:
afc163 2015-11-04 20:48:51 +08:00
parent 3659d8ab8e
commit f205f43bd9
3 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
components/popover/demo/placement.md
View File

@ -16,45 +16,50 @@ const content = <div>
</div>;
ReactDOM.render(<div>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
<br/>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
<br/>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
<br/>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>, document.getElementById('components-popover-demo-placement'));
````

2
components/popover/index.md
View File

@ -20,7 +20,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
| placement | 气泡框位置，可选 `top/left/right/bottom` | string | top |
| placement | 气泡框位置，可选 `top/left/right/bottom/topLeft/topRight/bottomLeft/bottomRight/leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | 卡片标题 | React.Element | 无 |
| overlay | 卡片内容 | React.Element | 无 |
| prefixCls | 浮层的类名 | string | 无 |

18
components/tooltip/demo/placement.md
View File

@ -12,18 +12,18 @@ const text = <span>提示文字</span>;
ReactDOM.render(
<div>
<div style={{marginLeft: 95}}>
<div style={{marginLeft: 60}}>
<Tooltip placement="topLeft" title={text}>
<a href="#">上左 topLeft</a>
<a href="#">上左</a>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">上边 top</a>
<a href="#">上边</a>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">上右 topRight</a>
<a href="#">上右</a>
</Tooltip>
</div>
<div style={{width: 100, float: 'left'}}>
<div style={{width: 60, float: 'left'}}>
<Tooltip placement="leftTop" title={text}>
<a href="#">左上</a>
</Tooltip>
@ -34,7 +34,7 @@ ReactDOM.render(
<a href="#">左下</a>
</Tooltip>
</div>
<div style={{width: 100, float: 'right'}}>
<div style={{width: 60, marginLeft: 270}}>
<Tooltip placement="rightTop" title={text}>
<a href="#">右上</a>
</Tooltip>
@ -45,7 +45,7 @@ ReactDOM.render(
<a href="#">右下</a>
</Tooltip>
</div>
<div style={{marginLeft: 95, clear: 'both'}}>
<div style={{marginLeft: 60, clear: 'both'}}>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">上右</a>
</Tooltip>
@ -65,8 +65,8 @@ ReactDOM.render(
display: inline-block;
line-height: 32px;
height: 32px;
width: 90px;
font-size: 12px;
width: 60px;
font-size: 14px;
text-align: center;
background: #f5f5f5;
margin-right: 1em;