Rate

Used for rating things.

Basic Usage

The rating starts with three levels by default, and color arrays can be used to differentiate scores and emotional tendencies.

Default:

Custom colors:

Basic Usage

Different Sizes

Use the size property to set the size of the rating component.

Different Sizes

Allow Half Selection

Set the allow-half property to allow half-star selection.

Allow Half Selection

Auxiliary Text

Set the show-text property to display auxiliary text, or show-score to display the score.

Fair

3.7 pts

Auxiliary Text

Clearable

Use the clearable property to reset the value to 0 when re-clicking the same value.

Clearable

Read-only

Set the disabled property to enable read-only mode, commonly used for displaying scores.

3.7

Read-only

Custom Icon

Customize the icon via the icon slot.

★

★

★

★

★

★

★

★

★

★

Custom Icon

Use in Nuxt

The Rate component fully supports Nuxt 3/4 SSR rendering. When used in a Nuxt project, the component is automatically imported.

Average Score:

4.5

Use in Nuxt

SSR Notes:

• ✅ Star display and half-selection (allow-half) are fully supported.
• ✅ Custom text and score display render accurately in SSR.
• ✅ Color configurations (colors array) support server-side calculation.
• ✅ Styles remain consistent across different sizes.

SSR Safety

During server-side rendering, the Rate component generates static star bit maps or SVG paths, ensuring that users can see the full rating status before JavaScript loads.

API

Rate Props

Prop	Description	Type	Default
v-model / model-value	Binding value	number	0
max	Maximum value	number	5
disabled	Whether it is read-only	boolean	false
allow-half	Whether half-selection is allowed	boolean	false
clearable	Whether to allow resetting by clicking the current value	boolean	false
show-text	Whether to display auxiliary text, overrides score	boolean	false
show-score	Whether to display current score; active only when show-text is false	boolean	false
text-color	Auxiliary text color	string	'#1f2d3d'
texts	Array of auxiliary texts	string[]	['Disappointing', 'Poor', 'Fair', 'Good', 'Excellent']
colors	Active rating colors; supports string or array (for <=2, <=4, and 5)	string | string[]	'#F7BA2A'
void-color	Color for unselected status	string	'#C6D1DE'
disabled-void-color	Unselected color when disabled	string	'#EFF2F7'
size	Size of rating icons	'large' | 'default' | 'small'	'default'
score-template	Display template for scores	string	'{value}'

Rate Events

Event Name	Description	Callback Parameters
change	Triggered when the value changes	(value: number) => void

Rate Slots

Slot Name	Description	Parameters
icon	Custom icon	{ index: number, width: string, activeColor: string, voidColor: string }

Theme Variables

Variable	Description	Default
--yh-rate-void-color	Unselected color	#c6d1de
--yh-rate-fill-color	Selected color	#f7ba2a
--yh-rate-disabled-void-color	Unselected color when disabled	#eff2f7
--yh-rate-text-color	Auxiliary text color	#1f2d3d
--yh-rate-font-size	Auxiliary text size	14px
--yh-rate-icon-margin	Icon spacing	6px