Rate Component

Last updated: 1 month ago

Category: Form

The Rate component provides star-based rating functionality with half-star precision and full customization of rating icons/images.

Basic Usage

The custom tag <oc-rate> represents a 5-star rating component by default.

Setting Star Count

Use the count attribute to set the number of stars (default: 5).

Note: count should be a positive integer - decimal values will be truncated.

Enabling Half-Star Ratings

Set the half attribute to allow half-star precision in ratings.

Displaying Clear Button

Set the clearable attribute to show a clear button that resets the rating to zero when clicked.

Displaying Results

Set the result attribute to show rating results.

Customize result format with result.format using {{this.xxx}} template variables:

• stars: Number of stars
• value: Numeric value
• count: Total stars
• total: Maximum score
• title: Indicates the displayed meaning. If the parameter map is not used, this variable will be empty.

Sizes

The component supports three sizes, configured via the size attribute with possible values: sm, md, and lg.

• sm: 32px(3.2rem) height, matches text line height for inline usage
• md: 40px(4.0rem) height, matches input field height for form integration
• lg: 56px(5.6rem) height, matches large input field height for form integration

Clear Button

Set clearable attribute to display a clear button that resets the rating to zero when clicked.

Readonly and Disabled Modes

Set readonly for read-only or disabled to disable. Both prevent interaction.

Visual differences:

• readonly doesn't gray out the element, just prevents interaction
• disabled grays out the element to visually indicate unavailability

Attributes

This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.

Several important notes:

1. All component attributes should be lowercase.
2. Attribute values must be in string format.
3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
4. For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
   • Module parameter contType (if exists) should be written as cont-type in component attributes
   • Parameter b4Init should be written as b4-init in attributes
5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
6. When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.

Common Methods

Common component methods:

• set: Set properties (takes key-value pairs or array)
• reset: Reset properties (no params)
• clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

• connected: Component connected (no params)
• disconnected: Component disconnected (no params)
• adopted: Component moved (no params)
• set: Property set (receives value)
• cleared: Property cleared (no params)
• reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})