Skip to main content
Supported Regions:上海

Rating

WdRating

Applicable Scenarios​

For rating input and display, using intuitive icons to represent the rating value.

Basic Capabilities Description​

  1. The basic properties support selecting the component size and setting the current rating value.
  2. The advanced properties of the Rating component support configuring min value, max value, numerical adjustment step size, icon color (effective when using built-in icons), custom icons, and a tooltip copy generation function.

Extended Scenarios Description​

How to Configure Step Size and Icon Display Style​

Example

Configure the step size to 0.5, adjust the icon color, and set up custom icons.

Configuration Method

Configure Step Size: In the Scoring Attributes Area - Score Selector - Numerical Adjustment Step Size, enter 0.5 as the target step size.

Adjust icon color: In the Scoring Attributes Area - Score Selector - Icon Selected Color, enter rgb(255, 119, 158) as the target color; in the Icon Unselected Color input field below, enter rgb(132, 106, 165) as the target color.

Configure custom icons: In the Scoring Attributes Area - Score Selector - Default Icon, you can select the icon representing the current rating value; in the Scoring Attributes Area - Score Selector - Background Icon, you can select the icon to be displayed in the background. Both support selecting built-in icons and custom icons.

Example​

Interactive Preview​

Configure Minimum Value, Maximum Value, and Step Size​

Custom Icon Color​

Custom Icons​

Configure Different Sizes​

Custom Prompt Text​

{
  tooltip: ({ value }) => `Current rating value is: ${value}`;
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Display HeadlineslabelVisibleboolean

Default value: true

Title alignmentlabelAlignstring

In the scenario, the form by default follows the title alignment configuration of the form container.

Line break in headinglabelWrapboolean

If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.

Title positionlayoutstring

Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.

Title widthlabelWidthstring

You can enter a value with units such as px or %, for example: 200px.

In the scenario, the form follows the title width configuration of the form container by default.

Heading NotelabelTipsstring

Take effect on PC/H5

Configure tooltip content for the heading

Minimum valueminnumber0
Maximum valuemaxnumber

Default value: 5

Adjust step sizestepnumber

Minimum range for single score change

Default value: 1

default iconiconstring

Default score icon

Default value: "td:star-filled"

custom iconiconSrcstring

Set custom icon address

Unselected iconbackgroundIconstring

When empty, the default icon will be used to display the unselected effect

Score background icon

custom unselected iconbackgroundIconSrcstring

Set custom icon address

Selected icon colorforegroundColorstring

When using a custom image as an icon, color configuration does not take effect

Default value: "#ffcf48"

Icon unselected colorbackgroundColorstring

When using a custom image as an icon, color configuration does not take effect

Default value: "#bfbfbf"

Display underscore on mobile terminalborderedH5boolean

After closing, the mobile terminal does not show the bottom underline

Default value: true

callbacksobject

configuration-related functions

Status.statusstring

Default value: "edit"

Requiredrequiredboolean

Enable required for this component, value cannot be empty

Required identifierrequiredFlagboolean

Enabled, the component will display a required asterisk tag if mandatory.

Default value: true

Required validation noterequiredMsgstring

Enable required, prompting message when component value is empty

Default value: "该项为必填项"

Bound fieldnamestring

The Key of the form field is used to match the field identifier of the data model when submitting data. Ensure uniqueness inline.

Title content.labelstring

Example: "标题"

Scorevaluenumber

Current Score

Component sizesizestring

Control the size of the score component

Default value: "sm"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
value changechangeobject
  • value: number

    评分值
Compatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
Bound fieldnamestring

The Key of the form field is used to match the field identifier of the data model when submitting data. Ensure uniqueness inline.

Title content.labelstring
Scorevaluenumber

Current Score

Minimum valueminnumber
Maximum valuemaxnumber
Adjust step sizestepnumber

Minimum range for single score change

Indicates whether to displayvisibleboolean

Whether to display the component

Whether to disabledisabledboolean

Component Disabled

Specify whether it is read-only or not.readOnlyboolean

Whether the component is read-only

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
set valuesetValuenumber值

通过 $w.id1.setValue("weda") 设置组件值

Show/Hide SettingssetVisibleboolean显示

Set the component to hidden via $w.id1.setVisible(false)

Set DisabledsetDisabledboolean禁用

Set the component to disabled with $w.id1.setDisabled(true)

Clear valueclearValue

Clear the component value with $w.id1.clearValue()

Set as read-onlysetReadOnlyboolean只读

Set the component to read-only via $w.id1.setReadOnly(true)

Trigger validationhandleValidate

Validate the component value via $w.id1.handleValidate()

Clear verificationclearValidate

Clear component validation via $w.id1.clearValidate()

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-rating-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-rating-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-rating-rootSettable root element style for the H5 side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-rating-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-rating-rootSettable root element style for the PC side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-rating-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-rating-rootSettable root element style for mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-rating-root {
  /* Write CSS styles here */
}
Component title style.wd-rating-root .wd-form-item-wrap__labelComponent title element

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
Editing status - Verification information.wd-rating-root .wd-g-text-errorSet component verification information style

:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
prompt text.wd-rating-root .wd-form-item__help-textSet the text style of the component prompt

:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }
ScoreScore component.wd-rating
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating {
  /* Write CSS styles here */
}
Disabled State Score Component.wd-rating.is-disabled
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating.is-disabled {
  /* Write CSS styles here */
}
Disabled State Score Component.wd-rating.is-readonly
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating.is-readonly {
  /* Write CSS styles here */
}
Fill the icon container.wd-rating__full-icons-containerFill the parent container element of icon elements
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating__full-icons-container {
  /* Write CSS styles here */
}
background icon container.wd-rating__empty-icons-containerBackground icon elements' parent container element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating__empty-icons-container {
  /* Write CSS styles here */
}
icon container.wd-rating__icon-containerParent container element of the icon element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating__icon-container {
  /* Write CSS styles here */
}
Icon..wd-rating__iconIcon element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-rating__icon {
  /* Write CSS styles here */
}

Learn about Style API