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.

Selector

smart-rating

Properties

Properties

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

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

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

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

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

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;

Methods