Rate

Used for rating

Basic usage

Sizes

With allow-half

With text

Using text to indicate rating score

Clearable

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-fill-color, --el-rate-disabled-void-color, --el-rate-text-color. You can use like: :root { --el-rate-void-color: red; --el-rate-fill-color: blue; }.

Default Variables

Variable	Default Color
--el-rate-void-color	var(--el-border-color-darker)
--el-rate-fill-color	#f7ba2a
--el-rate-disabled-void-color	var(--el-fill-color)
--el-rate-text-color	var(--el-text-color-primary)

API

Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`number`	0
max	max rating score	`number`	5
size	size of Rate	`enum`	—
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	`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, 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 icon component	`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`	''
texts	text array	`array`	['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-template	score template	`string`
clearable 2.2.18	whether value can be reset to `0`	`boolean`	false
id	native `id` attribute	`string`	—
label a11y	same as `aria-label` in Rate	`string`	—