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-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)

Attributes

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuenumber0
maxmax rating scorenumber5
sizesize of Ratestringlarge / default / smalldefault
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 colorarray/object['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-colorcolor of unselected iconsstring#C6D1DE
disabled-void-colorcolor of unselected read-only iconsstring#EFF2F7
iconsicon 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 componentarray/object[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#1F2D3D
textstext arrayarray['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-templatescore templatestring

Events

NameDescriptionParameters
changeTriggers when rate value is changedvalue after changing

Source

ComponentDocs

Contributors