element/examples/docs/en-US/rate.md

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

<div class="block">
  <span class="demonstration">no color by default</span>
  <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
  <span class="demonstration">color for different levels</span>
  <el-rate
    v-model="value2"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
  </el-rate>
</div>

:::

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.

<el-rate
  v-model="value3"
  show-text>
</el-rate>

:::

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.

<el-rate
  v-model="value4"
  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
  void-icon-class="icon-rate-face-off"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>

:::

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.

<el-rate
  v-model="value5"
  disabled
  show-text
  text-color="#ff9900"
  text-template="{value}">
</el-rate>

:::

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