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; } }