diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md
index 5ae5744aab..6d53dec229 100644
--- a/components/rate/demo/basic.md
+++ b/components/rate/demo/basic.md
@@ -9,7 +9,5 @@
````jsx
import { Rate } from 'antd';
-ReactDOM.render(
-
-, mountNode);
+ReactDOM.render(, mountNode);
````
diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md
new file mode 100644
index 0000000000..43a7b24608
--- /dev/null
+++ b/components/rate/demo/disabled.md
@@ -0,0 +1,13 @@
+# 只读
+
+- order: 3
+
+只读,无法进行鼠标交互。
+
+---
+
+````jsx
+import { Rate } from 'antd';
+
+ReactDOM.render(, mountNode);
+````
diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md
new file mode 100644
index 0000000000..1ad3470281
--- /dev/null
+++ b/components/rate/demo/half.md
@@ -0,0 +1,13 @@
+# 半星
+
+- order: 1
+
+支持选中半星。
+
+---
+
+````jsx
+import { Rate } from 'antd';
+
+ReactDOM.render(, mountNode);
+````
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
new file mode 100644
index 0000000000..499eaff6cf
--- /dev/null
+++ b/components/rate/demo/text.md
@@ -0,0 +1,34 @@
+# 文案展现
+
+- order: 2
+
+给评分组件加上文案展示。
+
+---
+
+````jsx
+import { Rate } from 'antd';
+
+const Rater = React.createClass({
+ getInitialState() {
+ return {
+ value: 3,
+ count: null,
+ };
+ },
+ handleChange(value) {
+ this.setState({ value });
+ },
+ render() {
+ const { value } = this.state;
+ return (
+
+
+ {value && {value} 星}
+
+ );
+ }
+});
+
+ReactDOM.render(, mountNode);
+````
diff --git a/components/rate/index.jsx b/components/rate/index.jsx
index 17a521a909..a9ede757d0 100644
--- a/components/rate/index.jsx
+++ b/components/rate/index.jsx
@@ -1,11 +1,11 @@
import React, { PropTypes } from 'react';
import RcRate from 'rc-rate';
-export default class Affix extends React.Component {
+export default class Rate extends React.Component {
static propTypes = {
prefixCls: PropTypes.string,
};
- static defaultProps= {
+ static defaultProps = {
prefixCls: 'ant-rate',
};
render() {
diff --git a/components/rate/index.md b/components/rate/index.md
index 75387ce548..d9fe60a511 100644
--- a/components/rate/index.md
+++ b/components/rate/index.md
@@ -8,13 +8,18 @@
评分组件。
-## API
+## 何时使用
+
+- 对事物进行快速的评级。
+- 对评价进行展示。
+## API
-| 成员 | 说明 | 类型 | 默认值 |
+| 属性 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| count | star 个数 | Number | 5 |
| value | 受控值 | Number | |
| defaultValue | 默认值 | Number | |
| onChange(value: Number) | 回调 | Function | |
-| allowHalf | 是否允许半选 | Boolean | |
\ No newline at end of file
+| allowHalf | 是否允许半选 | Boolean | |
+| disabled | 只读,无法进行交互 | Boolean | |
diff --git a/style/components/rate.less b/style/components/rate.less
index 20c012c4b2..8f79b85351 100644
--- a/style/components/rate.less
+++ b/style/components/rate.less
@@ -1,33 +1,53 @@
-
@rate-prefix-cls: ant-rate;
+@rate-star-color: #f5a623;
.@{rate-prefix-cls} {
- -webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
list-style: none;
- font-size: 28px;
+ font-size: 18px;
display: inline-block;
+ vertical-align: middle;
font-family: 'anticon';
font-weight: normal;
font-style: normal;
- cursor: pointer;
- -webkit-font-smoothing: antialiased; /*解决safair和chrome被加粗*/
- -webkit-text-stroke-width: 0.2px; /*解决chrome锯齿*/
+ -webkit-font-smoothing: antialiased; /* 解决safair和chrome被加粗 */
+ -webkit-text-stroke-width: 0.2px; /* 解决chrome锯齿 */
+ -webkit-tap-highlight-color: transparent;
- &-disabled {
- cursor: default;
+ &-disabled &-star {
+ &:before,
+ &-content:before {
+ cursor: default;
+ }
+ &:hover {
+ transform: scale(1);
+ }
}
&-star {
margin: 0;
padding: 0;
display: inline-block;
- margin-right: 5px;
+ margin-right: 8px;
position: relative;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ color: tint(@rate-star-color, 20%);
+ }
+
+ &:before,
+ &-content:before {
+ color: #e9e9e9;
+ cursor: pointer;
+ content: "\E694";
+ transition: all 0.3s ease;
+ display: block;
+ }
&-content {
- display: none;
position: absolute;
left: 0;
top: 0;
@@ -35,24 +55,20 @@
height: 100%;
overflow: hidden;
&:before {
- content: "\E694";
+ color: transparent;
}
}
- &-half:before {
- content: "\E693";
- }
-
- &-half &-content {
- display: block;
- }
-
+ &-half &-content:before,
&-full:before {
- content: "\E694";
+ color: @rate-star-color;
}
+ }
- &-zero:before {
- content: "\E693";
- }
+ &-text {
+ margin-left: 8px;
+ vertical-align: middle;
+ display: inline-block;
+ font-size: @font-size-base;
}
}