Right to left in Vue Button component

11 Jun 20241 minute to read

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

<template>
    <ejs-button iconCss='e-icons e-setting-icon' enableRtl=true>Settings</ejs-button>
</template>

<script setup>
import { ButtonComponent as EjsButton } 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-setting-icon::before {
  content: '\e434';
}

button {
  margin: 25px 5px 20px 20px;
}
</style>
<template>
    <ejs-button iconCss='e-icons e-setting-icon' enableRtl=true>Settings</ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-button":ButtonComponent
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-setting-icon::before {
  content: '\e434';
}

button {
  margin: 25px 5px 20px 20px;
}
</style>