Rate Rating

Rules

Basic Example

const rule = {
    type:"rate",
    field:"rate",
    title:"Recommendation Level",
    value:3.5,
    props:{
        max: 10,
    },
    validate:[
        {required:true,type:'number',min:3, message: 'Select more than 3 stars',trigger:'change'}
    ]
}

Props Configuration Examples

Allow Half Selection

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:4.5,
    props:{
        allowHalf: true,
        max: 5,
    },
}

Show Text

const rule = {
    type:"rate",
    field:"satisfaction",
    title:"Satisfaction",
    value:3,
    props:{
        showText: true,
        texts: ['Very Poor', 'Disappointed', 'Average', 'Satisfied', 'Surprised'],
    },
}

Show Score

const rule = {
    type:"rate",
    field:"score",
    title:"Rating",
    value:4,
    props:{
        showScore: true,
        scoreTemplate: '{value} points',
    },
}

Custom Colors

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:4,
    props:{
        colors: {
            2: '#99A9BF',
            4: '#F7BA2A',
            5: '#FF9900'
        },
    },
}

Clearable

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        clearable: true,
        allowHalf: true,
    },
}

Events Examples

Listen to Rating Changes

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        allowHalf: true,
    },
    on: {
        change: (value) => {
            console.log('Rating changed:', value);
        },
    },
}

Show Feedback After Rating

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        showText: true,
        texts: ['Very Poor', 'Disappointed', 'Average', 'Satisfied', 'Surprised'],
    },
    inject: true,
    on: {
        change: ($inject, value) => {
            // Auto-fill comment content based on rating
            const comments = {
                1: 'Product quality is very poor, not recommended',
                2: 'Product is average, needs improvement',
                3: 'Product is acceptable, basically satisfied',
                4: 'Product is good, worth recommending',
                5: 'Product is excellent, highly recommended',
            };
            if (value >= 1 && value <= 5) {
                $inject.api.setValue('comment', comments[Math.ceil(value)]);
            }
        },
    },
}

Full configuration: Element_Rate

value :Number

Props

Attribute Name	Description	Type	Default Value
max	Maximum score	number	5
size	Size	enum	—
disabled	Whether it is read-only	boolean	false
allowHalf	Whether half selection is allowed	boolean	false
lowThreshold	Boundary value between low and medium scores. The value itself is classified as low score	number	2
highThreshold	Boundary value between high and medium scores. The value itself is classified as high score	number	4
colors	Colors of icons. If an array is passed, there are 3 elements corresponding to colors for 3 segments; if an object is passed, segments can be customized, with keys as boundary values of segments and values as corresponding colors	object	['#f7ba2a', '#f7ba2a', '#f7ba2a']
voidColor	Color of unselected icon	string	#c6d1de
disabledVoidColor	Color of unselected icon when read-only	string	#eff2f7
icons	Icon components. If an array is passed, 3 elements are required, corresponding to class names for 3 parts; if an object is passed, segments can be customized, with keys as boundary values of segments and values as corresponding class names	object	[StarFilled, StarFilled, StarFilled]
voidIcon	Icon component for unselected	string / Component	Star
disabledVoidIcon	Unselected icon in disabled state	string / Component	StarFilled
showText	Whether to display auxiliary text. If true, text content corresponding to current score will be selected from texts array	boolean	false
showScore	Whether to display current score. show-score and show-text cannot both be true	boolean	false
textColor	Color of auxiliary text	string	''
texts	Auxiliary text array	array	['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
scoreTemplate	Score display template	string
clearable	Whether value can be reset to 0	boolean	false
id	Native id attribute	string	—
ariaLabel	Consistent with Rate's aria-label attribute	string	—

Events

Event Name	Description	Type
change	Triggered when score changes	Function