Rate
Introduce
Rate component is often used for rating in forms.
Basic usage
Rate uses a five-point scale by default, you can also set max to set the maximum score. Then confirm the rating by clicking on the stars.
Custom color
You can set the color of the rating icon via color, and also via void-color for unselected rating icons.
Half star
Half-stars can also be achieved by adding an allow-half attribute when rating.
Rate Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue / v-model | number | 0 | Binding value. |
| max | number | 5 | Max rating score. |
| readonly | boolean | false | Whether Rate is read-only. |
| allow-half | boolean | false | Whether picking half start is allowed. |
| color | string | warning | Selected icon color. |
| void-color | string | undefined | Unselected icon color. |
| text | string | undefined | Text displayed at the end of the star. |
Rate Methods
| Name | Parameters | Description |
|---|---|---|
| change | (value: number) => void | Triggers when rate value is changed. |
Onu-UI