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

VariableDefault Color
--el-rate-void-colorvar(--el-border-color-darker)
--el-rate-fill-color#f7ba2a
--el-rate-disabled-void-colorvar(--el-fill-color)
--el-rate-text-colorvar(--el-text-color-primary)

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuenumber0
maxmax rating scorenumber5
sizesize of Rateenum
disabledwhether Rate is read-onlybooleanfalse
allow-halfwhether picking half start is allowedbooleanfalse
low-thresholdthreshold value between low and medium level. The value itself will be included in low levelnumber2
high-thresholdthreshold value between medium and high level. The value itself will be included in high levelnumber4
colorscolors 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 colorobject['#f7ba2a', '#f7ba2a', '#f7ba2a']
void-colorcolor of unselected iconsstring#c6d1de
disabled-void-colorcolor of unselected read-only iconsstring#eff2f7
iconsicon 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 componentobject[StarFilled, StarFilled, StarFilled]
void-iconcomponent of unselected iconsstring / ComponentStar
disabled-void-iconcomponent of unselected read-only iconsstring / ComponentStarFilled
show-textwhether to display textsbooleanfalse
show-scorewhether to display current score. show-score and show-text cannot be true at the same timebooleanfalse
text-colorcolor of textsstring''
textstext arrayarray['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-templatescore templatestring
clearable 2.2.18whether value can be reset to 0booleanfalse
idnative id attributestring
label a11y deprecatedsame as aria-label in Ratestring
aria-label a11y 2.7.2same as aria-label in Ratestring

Events

NameDescriptionType
changeTriggers when rate value is changedFunction

Exposes

NameDescriptionType
setCurrentValueset current valueFunction
resetCurrentValuereset current valueFunction

Source

ComponentDocs

Contributors