Rate
Used for rating things.
Basic Usage
The component uses a five-point rating scale by default, and colors can be used to customize the active icon color.
Default:
Custom colors:
Basic Usage
Different Sizes
Use the size prop to switch between large, default, and small.
Different Sizes
Allow Half Selection
Set allow-half to enable half-step ratings.
Allow Half Selection
Auxiliary Text
Use show-text to display helper text or show-score to render the numeric value.
Fair
3.7 pts
Auxiliary Text
Clearable
Use clearable to reset the value to 0 when clicking the current score again.
Clearable
Read-only
Set disabled to enable read-only display mode.
3.7
Read-only
Custom Icon
Use the icon slot to replace the built-in rating icon.
Custom Icon
Use in Nuxt
YhRate works in Nuxt 3/4 after registering @yh-ui/nuxt.
Average Score:
4.5
Use in Nuxt
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
model-value / v-model | 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 |
icon | Custom selected icon | string | Component | '' |
void-icon | Custom unselected icon | string | Component | '' |
disabled-void-icon | Custom unselected icon when disabled | string | Component | '' |
colors | Active rating colors | string | string[] | Record<number, string> | '#F7BA2A' |
void-color | Color for unselected status | string | '#C6D1DE' |
disabled-void-color | Unselected color when disabled | string | '#EFF2F7' |
show-score | Whether to display the current score | boolean | false |
show-text | Whether to display auxiliary text | boolean | false |
text-color | Auxiliary text color | string | '#1f2d3d' |
texts | Array of auxiliary texts | string[] | [] |
score-template | Display template for scores | string | '{value}' |
size | Size of rating icons | 'large' | 'default' | 'small' | 'default' |
clearable | Whether clicking the current value resets the rating | boolean | false |
theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
update:modelValue | Triggered when the bound value changes | (value: number) => void |
change | Triggered when the value changes | (value: number) => void |
Slots
| Slot Name | Description | Parameters |
|---|---|---|
icon | Custom icon | { index: number, width: string, activeColor: string, voidColor: string } |
Expose
This component does not expose public instance methods or properties.
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 |
Type Exports
| Name | Description |
|---|---|
YhRateProps | Component props type |
YhRateEmits | Component emits type |
YhRateSlots | Component slots type |
YhRateSize | Size union type |
YhRateInstance | Component instance type |