Right to left in Vue Check box component

11 Jun 20241 minute to read

CheckBox component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in CheckBox component.

<template>
<ejs-checkbox label='Default' enableRtl=true></ejs-checkbox>
</template>

<script setup>

import { CheckBoxComponent as EjsCheckbox } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);


export default {}
</script>

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

.e-checkbox-wrapper {
  margin-top: 18px;
}
</style>
<template>
<ejs-checkbox label='Default' enableRtl=true></ejs-checkbox>
</template>

<script>

import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-checkbox":CheckBoxComponent,
},
}
</script>

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

.e-checkbox-wrapper {
  margin-top: 18px;
}
</style>