diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index 3c282d1e31ac719c63c3a0a34a620f3041814be3..a61b4d1b7e0a306a8b64e0d3e6313b15f6e486cc 100644
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -2,7 +2,7 @@
- order: 1
-位置有四个方向。
+位置有十二个方向。
---
@@ -16,23 +16,51 @@ const content =
;
ReactDOM.render(
-
+
+
+
+
-
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
, document.getElementById('components-popover-demo-placement'));
````
diff --git a/components/popover/index.jsx b/components/popover/index.jsx
index 2ba5c222ecfcb059ae2e311a5b6f70366046fe8d..e401f4a8564f1d37118e0c6839c75db26494e343 100644
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@@ -1,8 +1,9 @@
import React from 'react';
import Tooltip from 'rc-tooltip';
+
const prefixCls = 'ant-popover';
-export default React.createClass({
+const Popover = React.createClass({
getDefaultProps() {
return {
prefixCls: prefixCls,
@@ -13,28 +14,42 @@ export default React.createClass({
overlayStyle: {}
};
},
- render() {
- const overlay =
-
- {this.props.title}
-
-
- {this.props.overlay}
-
-
;
+ render() {
const transitionName = ({
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
- right: 'zoom-left'
+ right: 'zoom-left',
+ topLeft: 'zoom-down',
+ bottomLeft: 'zoom-up',
+ leftTop: 'zoom-right',
+ rightTop: 'zoom-left',
+ topRight: 'zoom-down',
+ bottomRight: 'zoom-up',
+ leftBottom: 'zoom-right',
+ rightBottom: 'zoom-left',
})[this.props.placement];
return (
+ {...this.props}
+ overlay={this.getOverlay()}>
{this.props.children}
);
- }
+ },
+
+ getOverlay() {
+ return
+
+ {this.props.title}
+
+
+ {this.props.overlay}
+
+
;
+ },
});
+
+export default Popover;
diff --git a/components/popover/index.md b/components/popover/index.md
index 0135ea0efb3e3ae466892214aa2025503b8bcb99..4aeb957fe94e1425c68e5a63c927ded83f90e9de 100644
--- a/components/popover/index.md
+++ b/components/popover/index.md
@@ -22,5 +22,5 @@
| trigger | 触发行为,可选 `hover/focus/click` | string | hover |
| placement | 气泡框位置,可选 `top/left/right/bottom` | string | top |
| title | 卡片标题 | React.Element | 无 |
-| content | 卡片内容 | React.Element | 无 |
-| overlayClassName | 浮层的类名 | string | 无 |
+| overlay | 卡片内容 | React.Element | 无 |
+| prefixCls | 浮层的类名 | string | 无 |
diff --git a/style/components/popover.less b/style/components/popover.less
index f990e90d21ce6915602301dc35c647d247cc9df6..3f80d2243d1b940fc630cf91257f4c617234ae1d 100644
--- a/style/components/popover.less
+++ b/style/components/popover.less
@@ -54,7 +54,7 @@
}
// Offset the popover to account for the popover arrow
- &-placement-top {
+ &-placement-top, &-placement-topLeft, &-placement-topRight {
margin-top: -@popover-arrow-width;
padding-bottom: @popover-distance;
&:after {
@@ -65,7 +65,7 @@
}
}
- &-placement-right {
+ &-placement-right, &-placement-rightTop, &-placement-rightBottom {
margin-left: @popover-arrow-width;
padding-left: @popover-distance;
&:after {
@@ -76,7 +76,7 @@
}
}
- &-placement-bottom {
+ &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
margin-top: @popover-arrow-width;
padding-top: @popover-distance;
&:after {
@@ -87,7 +87,7 @@
}
}
- &-placement-left {
+ &-placement-left, &-placement-leftTop, &-placement-leftBottom {
margin-left: -@popover-arrow-width;
padding-right: @popover-distance;
&:after {
@@ -165,7 +165,9 @@
content: "";
}
- &-placement-top > &-arrow {
+ &-placement-top > &-arrow,
+ &-placement-topLeft > &-arrow,
+ &-placement-topRight > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
@@ -179,7 +181,16 @@
border-top-color: @popover-arrow-color;
}
}
- &-placement-right > &-arrow {
+ &-placement-topLeft > &-arrow {
+ left: 15%;
+ }
+ &-placement-topRight > &-arrow {
+ left: 85%;
+ }
+
+ &-placement-right > &-arrow,
+ &-placement-rightTop > &-arrow,
+ &-placement-rightBottom > &-arrow {
top: 50%;
left: @popover-distance - @popover-arrow-outer-width + 1;
margin-top: -@popover-arrow-outer-width;
@@ -193,7 +204,16 @@
border-right-color: @popover-arrow-color;
}
}
- &-placement-bottom > &-arrow {
+ &-placement-rightTop > &-arrow {
+ top: 15%;
+ }
+ &-placement-rightBottom > &-arrow {
+ top: 85%;
+ }
+
+ &-placement-bottom > &-arrow,
+ &-placement-bottomLeft > &-arrow,
+ &-placement-bottomRight > &-arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
@@ -207,8 +227,16 @@
border-bottom-color: @popover-arrow-color;
}
}
+ &-placement-bottomLeft > &-arrow {
+ left: 15%;
+ }
+ &-placement-bottomRight > &-arrow {
+ left: 85%;
+ }
- &-placement-left > &-arrow {
+ &-placement-left > &-arrow,
+ &-placement-leftTop > &-arrow,
+ &-placement-leftBottom > &-arrow {
top: 50%;
right: @popover-distance - @popover-arrow-outer-width + 1;
margin-top: -@popover-arrow-outer-width;
@@ -222,4 +250,11 @@
bottom: -@popover-arrow-width;
}
}
+ &-placement-leftTop > &-arrow {
+ top: 15%;
+ }
+ &-placement-leftBottom > &-arrow {
+ top: 85%;
+ }
+
}