Enable rtl in Vue Switch component

30 May 20241 minute to read

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

Composition API (~/src/App.vue)

<template>
  <ejs-switch enableRtl=true></ejs-switch>
</template>

<script setup>

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

enableRipple(true);
</script>

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

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

Options API (~/src/App.vue)

<template>
  <ejs-switch enableRtl=true></ejs-switch>
</template>

<script>

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

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

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

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