Rate

Rules

Basic Example

const rule = {
    type:"rate",
    field:"rate",
    title:"Recommendation Level",
    value:3.5,
    props:{
        count: 10,
    }
}

Props Configuration Examples

Allow Half-Star Rating

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

Allow Clear

const rule = {
    type:"rate",
    field:"rating",
    title:"Service Rating",
    value:0,
    props:{
        count: 5,
        allowClear: true,
    }
}

Readonly Rating

const rule = {
    type:"rate",
    field:"rating",
    title:"Average Rating",
    value:4.5,
    props:{
        readonly: true,
        allowHalf: true,
    }
}

Smiley Grading

const rule = {
    type:"rate",
    field:"rating",
    title:"Satisfaction",
    value:0,
    props:{
        grading: true,
        count: 5,
    }
}

Events Examples

Handle Rating Changes

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

Show Feedback After Rating

const rule = [
    {
        type:"rate",
        field:"rating",
        title:"Product Rating",
        value:0,
        props:{
            allowHalf: true,
            count: 5,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Display feedback based on rating
                const feedbackMap = {
                    1: "Very Poor",
                    2: "Poor",
                    3: "Average",
                    4: "Good",
                    5: "Excellent",
                };
                const level = Math.ceil(value);
                $inject.api.setValue('feedback', feedbackMap[level] || '');
            },
        },
    },
    {
        type:"input",
        field:"feedback",
        title:"Feedback",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Rate

value: Number

Props

Parameter	Description	Type	Default
count	Total number of ratings	number	5
allow-half	Whether to allow half selection	boolean	false
allow-clear	Whether to allow clear	boolean	false
grading	Whether to enable smiley grading	boolean	false
readonly	Whether in readonly state	boolean	false
disabled	Whether disabled	boolean	false

Events

Event Name	Description	Parameters
change	Triggered when value changes	value: number
hover-change	Triggered when mouse moves over value	value: number