提交 f205f43b 编写于 作者: A afc163

update tooltip and placement demo

上级 3659d8ab
......@@ -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'));
````
......
......@@ -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 | 无 |
......@@ -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;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册