Rate Component

Rate component is used for rating operations, supporting custom icons, colors, half selection and other features.

Basic Usage

Basic rate component usage, bind the rating value through v-model.

Basic Rating

Current value: 3

Disabled State

Show Code

Different Sizes

Rate component supports three sizes: small, default, and large.

Small Size

Default Size

Large Size

Show Code

Custom Icon

You can customize the icons of the rate component through the icon attribute, including unselected icon, half-selected icon, and selected icon.

Custom Icon Example 1

Custom Icon Example 2

Show Code

Custom Color

You can customize colors for different rating values through the color attribute.

Default Color

Custom Color

Show Code

Maximum Rating Value

Set the maximum rating value of the rate component through the max attribute, default is 5.

Default Max Value (5)

Custom Max Value (3)

Custom Max Value (10)

Show Code

Half Selection Mode

Rate component supports half selection mode by default, you can control whether to enable half selection through the is-half attribute.

Half Selection Enabled (Default)

Current value: 2.5

Half Selection Disabled

Current value: 3

Show Code

Custom Gap

You can set the gap between rating icons through the gap attribute, default is 5px.

Small Gap (2px)

Default Gap (5px)

Large Gap (15px)

Show Code

Event Handling

Rate component provides a change event that is triggered when the rating value changes.

Event Log:

Show Code

Rate API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	number	—	—
size	Size	string	small / default / large	default
color	Rating color configuration	{ [key in number]?: string }	—	—
icon	Custom icon configuration	{ empty?: string, half?: string, show?: string }	—	—
gap	Icon gap	number	—	5
max	Maximum rating value	number	—	5
is-half	Whether to support half selection	boolean	—	true
disabled	Whether disabled	boolean	—	false

Events

Event Name	Description	Parameters
change	Triggered when rating value changes	(value: number)

Style Variables

The rate component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$font-size-small	Font size - Small
$font-size-default	Font size - Default
$font-size-large	Font size - Large