Class

Rating

kiss.ui.Rating(config)

The Rating derives from Component.

Provides a rating field.

Constructor

# new Rating(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myRating = document.createElement("a-rating").init(config)

Or use the shorthand for it:

const myRating = createRating({
 label: "Rate me!",
 max: 5,
 iconColorOn: "#00aaee",
 iconColorOff: "#dddddd"
})

myRating.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
 title: "My panel",
 items: [
     {
         type: "rating",
         label: "Rate me!",
         max: 5
     }
 ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
label string
max number <optional>

From 1 to 10

value number <optional>

Default value

labelWidth string <optional>
labelPosition string <optional>

left | right | top | bottom

labelAlign string <optional>

left | right

fontSize string <optional>
shape string <optional>

star | heart | thumb

iconSize string <optional>
iconColorOn string <optional>
iconColorOff string <optional>
formula string <optional>
width string | number <optional>
height string | number <optional>
margin string <optional>
padding string <optional>
readOnly boolean <optional>
disabled boolean <optional>

View Source client/ui/fields/rating.js, line 42

this

Generated markup

<a-rating class="a-rating">
 <label class="field-label"></label>
 <span class="field-rating">
     <span class="rating" index="1">
     <span class="rating" index="2">
     <span class="rating" index="3">
     <span class="rating" index="4">
     <span class="rating" index="5">
 </span>
</a-rating>

Methods

# getIconClasses() → {object}

Get the icon classes for each checkbox shape

View Source client/ui/fields/rating.js, line 183

object

# getLabel() → {string}

Get the field label

View Source client/ui/fields/rating.js, line 371

string

# getLabelPosition() → {string}

Get the label position

View Source client/ui/fields/rating.js, line 430

"left" | "right" | "top"

string

# getValue() → {number}

Get the field value

View Source client/ui/fields/rating.js, line 322

  • The field value
number

# setFieldWidth(width)

Set the input field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/rating.js, line 407

this

# setInvalid()

Change the style when the field is invalid

View Source client/ui/fields/rating.js, line 358

this

# setLabel(newLabel)

Set the field label

Parameters:
Name Type Description
newLabel string

View Source client/ui/fields/rating.js, line 381

this

# setLabelPosition(position)

Set label position

Parameters:
Name Type Description
position string

"left" (default) | "right" | "top" | "bottom"

View Source client/ui/fields/rating.js, line 440

this

# setLabelWidth(width)

Set the label width

Parameters:
Name Type Description
width *

View Source client/ui/fields/rating.js, line 419

this

# setValid()

Remove the invalid style

View Source client/ui/fields/rating.js, line 347

this

# setValue(newValue, rawUpdateopt)

Set the field value

Parameters:
Name Type Attributes Description
newValue boolean

The new field value

rawUpdate boolean <optional>

If true, it doesn't update the associated record and doesn't trigger "change" event

View Source client/ui/fields/rating.js, line 274

this

# setWidth(width)

Set the field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/rating.js, line 395

this

# validate() → {boolean}

Validate the field value against validation rules

View Source client/ui/fields/rating.js, line 331

boolean