Right to left in Vue Radio button component

30 May 20242 minutes to read

RadioButton 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 RadioButton component.

<template>
<ul>
<li><ejs-radiobutton label='Option 1' name='default' enableRtl="true"></ejs-radiobutton></li>
<li><ejs-radiobutton label='Option 2' name='default' enableRtl="true" checked=true></ejs-radiobutton></li>
</ul>
</template>

<script setup>

import { RadioButtonComponent as EjsRadiobutton } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
</script>

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

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}
</style>
<template>
  <ul>
    <li><ejs-radiobutton label='Option 1' name='default' enableRtl="true"></ejs-radiobutton></li>
    <li><ejs-radiobutton label='Option 2' name='default' enableRtl="true" checked=true></ejs-radiobutton></li>
  </ul>
</template>

<script>

import { RadioButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
  name: "App",
  components: {
    "ejs-radiobutton": RadioButtonComponent
  }
}
</script>

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

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}
</style>