## Rate
Rate component
### How to use
:::demo This component separate rate into three different levels and add colors to different rate (there is no color by default). Add colors by attribute `colors`. And using `low-threshold` and `high-threshold` to set thrasholds between different levels
``` html
no color by default
color for different levels
```
:::
### Help Text
Using help text to indicate the rate
:::demo Add attribute `show-text` to the component to display help text at the right side. The help texts for each rate can be defined by `texts`. `texts` is array, its length should be `max`.
``` html
```
:::
### Additional Icon
You can use different icons to distinguish different rate components.
:::demo You can customize the icons for different level by attribute `icon-classes`. Following example also uses `void-icon-class` to set the icon when rate is empty.
``` html
```
:::
### Read-only
Only display the rate and allow to set half star.
:::demo Use attribute `disabled` to make the component read-only. Meanwhile, add `show-text` to display the rate value at the right side. Additionally, you can use attribute `text-template` to create a template, it contains a string `{value}`, and `{value}` will be converted to rate value.
``` html
```
:::
### Attributes
| Attribute | Description | Type | Options | Default |
|---------- |-------- |---------- |------------- |-------- |
| max | Max rate | number | — | 5 |
| disabled | Read-only | boolean | — | false |
| allow-half | Allow set half star or not | boolean | — | false |
| low-threshold | Threshold value for low and medium level，this is value itself will be in low level | number | — | 2 |
| high-threshold | Threshold value for medium and high level，this is value itself will be in high level | number | — | 4 |
| colors | Color array for icon, it should contain 3 colors, each one for a level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | Color of unselected icon | string | — | #C6D1DE |
| disabled-void-color | Color of unselected read-only icon | string | — | #EFF2F7 |
| icon-classes | Array of class names of icon, it should contain 3 elements，each of them is associated with a rate level | array | — | ['el-icon-star-on', 'el-icon-star-on',
'el-icon-star-on'] |
| void-icon-class | The class name of unselected icon | string | — | el-icon-star-off |
| disabled-void-icon-class | The class name of unselected read-only icon | string | — | el-icon-star-on |
| show-text | Display help text or not | boolean | — | false |
| text-color | Color of help text | string | — | 1F2D3D |
| texts | Help text array | array | — | ['Bad', 'Disappoint', 'Normal', 'Satisfy', 'Surprise'] |
| text-template | Help text template when the component is read-only| string | — | {value} |
### Events
| Event | Description | Callback |
|---------- |-------- |---------- |
| change | Trigerred when rate value is changed | value after changing |