Star Rating

Plugin Page:

Plugin page: Coming soon

Description

The Star Rating Plugin is a customizable rating component based on the Element Plus library's Rate component. This plugin allows users to rate content using stars, similar to other widely used rating systems. It is designed to be easily integrated into web applications with options to modify various aspects of the rating component, such as maximum rating value, whether half-stars are allowed, colors, and more. This plugin provides an easy way to collect user feedback in a visual format.

How to Use

  1. Install the plugin: Find the plugin and add it to your application.

  2. Place the input: Find the "Star Rating" in elements sidebar and drag it into the desired area. Set the parameters.

If you have any questions, feel free to reach out at [email protected]

Demo Page

https://plugindepartment.bubbleapps.io/version-test/star-rating

Plugin Parameters

  1. value:

    • Description: Binding value representing the current rating.

    • Type: number

    • Default: ''

  2. max:

    • Description: Maximum rating score.

    • Type: number

    • Default: 5

  3. size:

    • Description: Size of the rating stars.

    • Type: enum (e.g., small, medium, large)

  4. disabled:

    • Description: Determines if the rating component is read-only.

    • Type: boolean

    • Default: false

  5. allowHalf:

    • Description: Allows selection of half stars.

    • Type: boolean

    • Default: false

  6. lowThreshold:

    • Description: Threshold value between low and medium levels, used for coloring.

    • Type: number

    • Default: 2

  7. highThreshold:

    • Description: Threshold value between medium and high levels, used for coloring.

    • Type: number

    • Default: 4

  8. colors:

    • Description: Custom colors for the icons based on the rating level, provided as a comma-separated string (e.g., '#ffcc00,#ff9900,#ff6600').

    • Type: string

  9. voidColor:

    • Description: Color of unselected icons.

    • Type: string

    • Default: #c6d1de

  10. disabledVoidColor:

    • Description: Color of unselected read-only icons.

    • Type: string

    • Default: #eff2f7

  11. voidIcon:

    • Description: The icon used for unselected stars.

    • Type: string

    • Default: Star

  12. disabledVoidIcon:

    • Description: The icon used for unselected read-only stars.

    • Type: string

    • Default: StarFilled

  13. showText:

    • Description: Whether to display helper texts next to the rating.

    • Type: boolean

    • Default: false

  14. showScore:

    • Description: Whether to display the current score. It cannot be used simultaneously with showText.

    • Type: boolean

    • Default: false

  15. textColor:

    • Description: The color of the text.

    • Type: string

    • Default: ''

  16. texts:

    • Description: Custom text to display at each rating level, provided as a comma-separated string (e.g., 'Very Bad,Bad,Neutral,Good,Excellent').

    • Type: string

    • Default: ''

  17. clearable:

    • Description: Allows the user to clear the rating back to zero.

    • Type: boolean

    • Default: false

Icons

To see the available icon identifiers and their appearance, visit Element Plus Icon Collection.

Found a bug?

If you suspect something isn't working quite right, please don't hesitate to send us a bug report. Here's an instruction on how to file a bug report. Your input helps us quickly address issues and strive for continuous improvement. Thank you for your cooperation!

PreviousVerification Code Input

Last updated