RatingComponent

Represents the Essential JS 2 VueJS Rating Component

<ejs-rating v-bind:value='value'></ejs-rating>

Properties

allowReset

boolean

Defines whether to show or hide the reset button in a rating component. When set to “true”, the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.

<template>
    <ejs-rating id='rating' :allowReset="true" value="3.0"></ejs-rating>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to false

cssClass

string

Defines one or more CSS classes that can be used to customize the appearance of a rating component. One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects.

Defaults to ”

disabled

boolean

Defines whether a rating component is enabled or disabled. A disabled rating component may have a different visual appearance than an enabled one. When set to “true”, the rating component will be disabled, and the user will not be able to interact with it.

Defaults to false

emptyTemplate

string | function

Defines the template that defines the appearance of each un-rated item in a rating component.

Defaults to ”

enableAnimation

boolean

Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered. When set to “true”, an animation will be added when the user hovers their cursor over an item in the rating component.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSingleSelection

boolean

Defines whether to select all the items before the selected item should be in selected state in a rating component. When set to “true”, only the selected item will be in the selected state, and all other items will be un-selected. When set to “false”, all items before the selected one will be in the selected state.

Defaults to false

fullTemplate

string | function

Defines the template that defines the appearance of each rated item in a rating component.

<template>
    <ejs-rating id='rating' emptyTemplate="<span class='e-icons e-close'></span>" fullTemplate="<span class='e-icons e-check'></span>" value="3.0"></ejs-rating>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({
    data:function() {    
        return {};
    }  
});
</script>

Defaults to ”

itemsCount

number

Defines the specific number of items (symbols) in rating component. The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating value.

Defaults to 5

labelPosition

string | LabelPosition

Defines the position of the label in rating component. The possible values are:

• Top
• Bottom
• Left
• Right

<template>
    <ejs-rating id='rating' value="3.0" :showLabel='true' labelPosition='Top'/>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to LabelPosition.Right

labelTemplate

string | function

Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.

<template>
    <ejs-rating id='rating' value="3.0" :showLabel='true' labelTemplate="<span>${value} out of 5</span>"/>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);

export default Vue.extend({});
</script>

Defaults to ”

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

min

number

Defines the value that specifies minimum rating that a user can select. The value is set to 0, which means that the minimum possible rating is 0.

Defaults to 0.0

precision

string | PrecisionType

Defines the precision type of the rating which used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision. The possible values are:

• Full
• Half
• Quarter
• Exact

<template>
    <ejs-rating id='rating' precision='Half' value='2.5'/>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to PrecisionType.Full

readOnly

boolean

Defines a boolean value that specifies whether the read-only mode is enabled for a rating component, which prevents the user from modifying or interacting with the rating value but allows them to read it.

Defaults to false

showLabel

boolean

Defines a value that specifies whether to display a label that shows the current value of a rating. When set to “true”, a label will be displayed that shows the current value of the rating; otherwise false.

<template>
    <ejs-rating id='rating' value="3.0" :showLabel='true'/>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to false

showTooltip

boolean

Defines a value that defines whether to show tooltip for the items. When set to “true”, show tooltip for the items.

Defaults to true

tooltipTemplate

string | function

Defines the template that used as tooltip content over default tooltip content of the rating. The current value of rating passed as context to build the content.

<template>
    <ejs-rating id='rating' tooltipTemplate="<span>${value} Star</span>" value="3.0"/>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to ”

value

number

Defines the current rating value which used to display and update the rating selected by the user. Based on “PrecisionType”, users can select ratings with varying levels of precision. The “value” is a decimal value that ranges from the minimum value to the items count, as specified by the “min” and “itemsCount” properties of the rating.

<template>
    <ejs-rating id='rating' value="3.0"></ejs-rating>
</template>
<script>
import Vue from "vue";
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default Vue.extend({});
</script>

Defaults to 0.0

visible

boolean

Defines a value that indicates whether the rating component is visible or hidden. When set to “true”, if the rating component is visible.

Defaults to true

Methods

destroy

Destroys the Rating instance.

Returns void

reset

Reset’s the value to minimum.

<template>
  <div class='wrap'>
      <ejs-rating ref="rating" id="rating" min="1.0" value="3.0"></ejs-rating>
      <button v-on:click="BtnClick">reset</button>
  </div>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default {
  methods: {
      BtnClick: function () {
          this.$refs.rating.reset();
      }
  }
}
</script>

Returns void

Events

beforeItemRender

EmitType<RatingItemEventArgs>

Event callback that is raised before rendering each item.

<template>
    <ejs-rating id="rating" :beforeItemRender="beforeItemRender" value="3.0"></ejs-rating>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin,RatingItemEventArgs  } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default {
    methods : {
        beforeItemRender: function(args: RatingItemEventArgs) {
          //Your required action here
        }
    }
}
</script>

created

EmitType<Event>

Event callback that is raised after rendering the rating.

onItemHover

EmitType<RatingHoverEventArgs>

Event callback that is raised when a user hovers over an item.

<template>
     <ejs-rating id="rating" :onItemHover="onItemHover" value="3.0"></ejs-rating>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin,RatingHoverEventArgs  } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default {
    methods : {
        onItemHover: function(args: RatingHoverEventArgs) {
            //Your required action here
        }
    }
}
</script>

valueChanged

EmitType<RatingChangedEventArgs>

Event callback that is raised when the value is changed.

<template>
    <ejs-rating id="rating" :valueChanged="valueChanged" value="3.0"></ejs-rating>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin, RatingChangedEventArgs  } from "@syncfusion/ej2-vue-inputs";
Vue.use(RatingPlugin);
export default {
    methods : {
        valueChanged: function(args: RatingChangedEventArgs) {
          alert("Previous Value:"+args.previousValue+"\nValue:"+args.value);
        }
    }
}
</script>