Labels in Vue Rating component

11 Jun 202410 minutes to read

You can use the showLabel property to display a label that shows the current value of the rating. When the showLabel property is set to true, a label will be displayed.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" value="3" :showLabel="true"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent as EjsRating} from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}

</style>
<template>
  <div class='wrap'>
    <ejs-rating id="rating" value="3" :showLabel="true"></ejs-rating>
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>

Label position

The rating component allows you to place the label on the top, bottom, left, or right side of the rating using the labelPosition property.

The following label positions are supported:

  • Top: The label is placed on the top of the rating.
  • Bottom: The label is placed on the bottom of the rating.
  • Left: The label is placed on the left side of the rating.
  • Right: The label is placed on the right side of the rating.
<template>
  <div class='wrap'>
    <label>Left Label Position</label><br />
    <ejs-rating id="rating1" value="3" :showLabel="true" labelPosition="Left"></ejs-rating><br />
    <label>Right Label Position</label><br />
    <ejs-rating id="rating2" value="3" :showLabel="true" labelPosition="Right"></ejs-rating><br />
    <label>Top Label Position</label><br />
    <ejs-rating id="rating3" value="3" :showLabel="true" labelPosition="Top"></ejs-rating><br />
    <label>Bottom Label Position</label><br />
    <ejs-rating id="rating4" value="3" :showLabel="true" labelPosition="Bottom"></ejs-rating><br />
  </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>
<template>
  <div class='wrap'>
    <label>Left Label Position</label><br />
    <ejs-rating id="rating1" value="3" :showLabel="true" labelPosition="Left"></ejs-rating><br />
    <label>Right Label Position</label><br />
    <ejs-rating id="rating2" value="3" :showLabel="true" labelPosition="Right"></ejs-rating><br />
    <label>Top Label Position</label><br />
    <ejs-rating id="rating3" value="3" :showLabel="true" labelPosition="Top"></ejs-rating><br />
    <label>Bottom Label Position</label><br />
    <ejs-rating id="rating4" value="3" :showLabel="true" labelPosition="Bottom"></ejs-rating><br />
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>

Label template

You can use the labelTemplate tag directive to specify a custom template for the Label of the rating. The current value of the rating will be passed as the value property in the template context when building the content of the label. This allows you to include dynamic information about the rating in the template.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" value="3" :showLabel="true" :labelTemplate="labelTemplate"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
import { createApp } from "vue";

enableRipple(true);

const labelTemplate = () => {
    return {
        template: createApp().component("labelTemplate", {
            template: '<span> out of 5</span>',
            data() {
                return {
                    data: {}
                };
            }
        })
    }
}

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
    margin: 50px auto;
    text-align: center;
}
</style>
<template>
    <div class='wrap'>
        <ejs-rating id="rating" value="3" :showLabel="true" :labelTemplate="labelTemplate"></ejs-rating>
    </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
import { createApp } from "vue";

enableRipple(true);

const app= createApp();

export default {
    name: "App",
    components: {
        "ejs-rating": RatingComponent
    },
    data() {
        return {
            labelTemplate: function ( ) {
                return {
                    template: app.component("labelTemplate", {
                        template: '<span> out of 5</span>',
                        data() {
                            return {
                                data: {}
                            };
                        }
                    })
                }
            }
        }
    }
}

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
    margin: 50px auto;
    text-align: center;
}
</style>