Rating JAVASCRIPT UI Component API

Rating Javascript API

Class

Rating

Rating allows you to input a rating. It is broadly used in applications with reviews.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-rating animation='none'></smart-rating>

Set the animation property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.animation = 'simple';

Get the animation property.

 const rating = document.querySelector('smart-rating');

 let animation = rating.animation;

disabledboolean

Disables the interaction with the element.

Default value

false

Example

Set the disabled property.

 <smart-rating disabled></smart-rating>

Set the disabled property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.disabled = false;

Get the disabled property.

 const rating = document.querySelector('smart-rating');

 let disabled = rating.disabled;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-rating locale='de'></smart-rating>

Set the locale property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.locale = 'fr';

Get the locale property.

 const rating = document.querySelector('smart-rating');

 let locale = rating.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

 <smart-rating localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-rating>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const rating = document.querySelector('smart-rating');

 let localizeFormatFunction = rating.localizeFormatFunction;

maxnumber

Determines the number of stars that will be displayed.

Default value

Try a demo showcasing the max property.

Example

Set the max property.

 <smart-rating max='5'></smart-rating>

Set the max property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.max = 10;

Get the max property.

 const rating = document.querySelector('smart-rating');

 let max = rating.max;

messagesobject

Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property.

 <smart-rating messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-rating>

Set the messages property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const rating = document.querySelector('smart-rating');

 let messages = rating.messages;

namestring

The name of the element. Used when submiting data inside a Form.

Default value

Example

Set the name property.

 <smart-rating name='rating1'></smart-rating>

Set the name property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.name = 'rating2';

Get the name property.

 const rating = document.querySelector('smart-rating');

 let name = rating.name;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-rating right-to-left></smart-rating>

Set the rightToLeft property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.rightToLeft = true;

Get the rightToLeft property.

 const rating = document.querySelector('smart-rating');

 let rightToLeft = rating.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-rating theme='blue'></smart-rating>

Set the theme property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.theme = 'red';

Get the theme property.

 const rating = document.querySelector('smart-rating');

 let theme = rating.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-rating unfocusable></smart-rating>

Set the unfocusable property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.unfocusable = false;

Get the unfocusable property.

 const rating = document.querySelector('smart-rating');

 let unfocusable = rating.unfocusable;

valuenumber

Determines the number of stars that will be marked as active.

Default value

Try a demo showcasing the value property.

Example

Set the value property.

 <smart-rating value='5'></smart-rating>

Set the value property by using the HTML Element's instance.

 const rating = document.querySelector('smart-rating');

 rating.value = 1;

Get the value property.

 const rating = document.querySelector('smart-rating');

 let value = rating.value;

Events

changeCustomEvent

This event is triggered when the value of the slider is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.value - A numeric value indicating the scroll position.

ev.detail.oldValue - A numeric value indicating the previous scroll position.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const rating = document.querySelector('smart-rating');
rating.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

Methods

getValue(): number

Get the value of the rating.

Returnsnumber

Invoke the getValue method.

const rating = document.querySelector('smart-rating');
const result = rating.getValue();

setValue( value: number): void

Sets the value of the rating.

Arguments

valuenumber

Sets the value of the rating

Invoke the setValue method.

const rating = document.querySelector('smart-rating');
rating.setValue(10);