improve rate style & demos

components/rate/demo/basic.md

@@ -9,7 +9,5 @@
 ````jsx
 import { Rate } from 'antd';
 
-ReactDOM.render(
-  <Rate allowHalf />
-, mountNode);
+ReactDOM.render(<Rate />, mountNode);
 ````

components/rate/demo/disabled.md

@@ -0,0 +1,13 @@
+# 只读
+
+- order: 3
+
+只读，无法进行鼠标交互。
+
+---
+
+````jsx
+import { Rate } from 'antd';
+
+ReactDOM.render(<Rate disabled defaultValue={2} />, mountNode);
+````

components/rate/demo/half.md

@@ -0,0 +1,13 @@
+# 半星
+
+- order: 1
+
+支持选中半星。
+
+---
+
+````jsx
+import { Rate } from 'antd';
+
+ReactDOM.render(<Rate allowHalf defaultValue={2.5} />, mountNode);
+````

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 (
+      <span>
+        <Rate onChange={this.handleChange} value={value} />
+        {value && <span className="ant-rate-text">{value} 星</span>}
+      </span>
+    );
+  }
+});
+
+ReactDOM.render(<Rater />, mountNode);
+````

components/rate/index.jsx

@@ -1,7 +1,7 @@
 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,
   };

components/rate/index.md

@@ -8,13 +8,18 @@
 
 评分组件。
 
-## API
+## 何时使用
+
+- 对事物进行快速的评级。
+- 对评价进行展示。
 
+## API
 
-| 成员        | 说明           | 类型               | 默认值       |
+| 属性        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
 | count    | star 个数   | Number |      5   |
 | value | 受控值   | Number |         |
 | defaultValue | 默认值   | Number |         |
 | onChange(value: Number) | 回调   | Function |         |
 | allowHalf | 是否允许半选   | Boolean |         |
+| disabled | 只读，无法进行交互 | Boolean |         |

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-tap-highlight-color: transparent;
 
-  &-disabled {
+  &-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;
   }
 }