Rate
Used for rating
Basic usage
Sizes
With allow-half
With text
Using text to indicate rating score
More icons
You can use different icons to distinguish different rate components.
Read-only
Read-only Rate is for displaying rating score. Half star is supported.
Custom styles
Now you can set custom style for rate component. Use css/scss language to change the global or local color. We set some global color variables: --el-rate-void-color, --el-rate-star-color, --el-rate-disable-void-color, --el-rate-text-color. You can use like: :root { --el-rate-void-color: red; --el-rate-star-color: blue; }.
Default Variables
| Variable | Color |
|---|---|
| --el-rate-void-color | #c6d1de |
| --el-rate-star-color | #f7ba2a |
| --el-rate-disable-void-color | #eff2f7 |
| --el-rate-text-color | #1f2d3d |
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value | number | — | 0 |
| max | max rating score | number | — | 5 |
| size | size of Rate | string | large / default / small | default |
| disabled | whether Rate is read-only | boolean | — | false |
| allow-half | whether picking half start is allowed | boolean | — | false |
| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color of unselected icons | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
| icons | icon components. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon component | array/object | — | [StarFilled, StarFilled, StarFilled] |
| void-icon | component of unselected icons | string/component | — | Star |
| disabled-void-icon | component of unselected read-only icons | string/component | — | StarFilled |
| show-text | whether to display texts | boolean | — | false |
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
| text-color | color of texts | string | — | #1F2D3D |
| texts | text array | array | — | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
| score-template | score template | string | — |
Events
| Event Name | Description | Parameters |
|---|---|---|
| change | Triggers when rate value is changed | value after changing |