Rate

Enterprise-level rating component based on BrConfigProvider for global theme configuration. It supports half stars, custom icons, read-only state, and seamless integration with BrFormItem.

Basic Usage

The most basic usage of the Rate component.

Example

Half Star

Supports half-star ratings, enabled via the allow-half attribute.

Example

Custom Icon and Count

You can customize the icons and the maximum rating count.

Example

Readonly and Disabled

Read-only State (Readonly)

Disabled State (Disabled)

Example

Theme Customization

BrRate seamlessly integrates with BrFormItem and supports global theme configuration via BrConfigProvider.

Service Rating

Terrible

Example

API

BrRate Props

Name	Type	Default	Description
modelValue / v-model	number	0	Current rating value
count	number	5	Total number of icons
allowHalf	boolean	false	Whether to allow half-star ratings
readonly	boolean	false	Whether the component is readonly
disabled	boolean	false	Whether the component is disabled
clearable	boolean	false	Whether to allow clearing when clicked again
size	ComponentSize | number	'default'	Size of the rating icons
color	string | string[] | Record<number, string>	-	Color when active, supports an array of colors or a piecewise color object
voidColor	string	-	Color when unselected
icon	Component | string	Star	Icon component when active
voidIcon	Component | string	Star	Icon component when unselected
halfIcon	Component | string	-	Icon component for half star (if not provided, it is implemented by clipping icon)
showText	boolean	false	Whether to show auxiliary text
texts	string[]	[]	Array of auxiliary texts
validationState	'default' | 'success' | 'error' | 'warning'	'default'	Validation state, automatically synced when integrated with BrFormItem

BrRate Emits

Name	Description	Callback Parameters
update:modelValue	Triggered when the rating value changes	(value: number)
change	Triggered when the rating value changes	(value: number)
hoverChange	Triggered when the hover rating value changes	(value: number)

BrRateItem Props (Internal Item Component)

Usually not used directly, exposed for deep customization.

Name	Type	Description
value	number	Value of the current item
activeValue	number	Total active value
hoverValue	number	Total hover value
allowHalf	boolean	Whether half stars are allowed
readonly	boolean	Whether it is readonly
disabled	boolean	Whether it is disabled
size	ComponentSize | number	Icon size
color	string	Active color
voidColor	string	Unselected color
icon	Component | string	Active icon
voidIcon	Component | string	Unselected icon
halfIcon	Component | string	Half-star icon