Right-to-Left Support

DevExtreme ships with a collection of editors that can be used as Vue components. This collection includes TextBox, NumberBox, DateBox, ColorBox, and many other controls. You can use Vue syntax and techniques to instantiate and configure the controls or handle their events. In addition, the components support prop validation and templates that use named slots. Find out more about DevExtreme Vue components.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div> <div :class="{ 'dx-rtl': rtlEnabled }" > <div class="options"> <div class="caption">Options</div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Language</div> <div class="dx-field-value"> <DxSelectBox :items="languages" :input-attr="{ 'aria-label': 'Language' }" :value="languages[1]" :rtl-enabled="rtlEnabled" @valueChanged="onLanguageChanged" /> </div> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Text Box</div> <div class="dx-field-value"> <DxTextBox :show-clear-button="true" :value="textValue" :input-attr="{ 'aria-label': 'Text Box' }" :rtl-enabled="rtlEnabled" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Number Box</div> <div class="dx-field-value"> <DxNumberBox :show-spin-buttons="true" :value="123" :rtl-enabled="rtlEnabled" :input-attr="{ 'aria-label': 'Number Box' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Select Box</div> <div class="dx-field-value"> <DxSelectBox :items="europeanUnion" :value="europeanUnion[0]" :input-attr="{ 'aria-label': 'European Union Data' }" :rtl-enabled="rtlEnabled" :display-expr="displayExpr" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Tag Box</div> <div class="dx-field-value"> <DxTagBox :items="europeanUnion" :value="[europeanUnion[0].id]" :input-attr="{ 'aria-label': 'Name' }" :rtl-enabled="rtlEnabled" :display-expr="displayExpr" placeholder="..." value-expr="id" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Text Area</div> <div class="dx-field-value"> <DxTextArea :value="textValue" :rtl-enabled="rtlEnabled" :input-attr="{ 'aria-label': 'Notes' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Autocomplete</div> <div class="dx-field-value"> <DxAutocomplete :items="europeanUnion" :rtl-enabled="rtlEnabled" :value-expr="displayExpr" :input-attr="{ 'aria-label': 'Autocomplete' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Check Box</div> <div class="dx-field-value"> <DxCheckBox :value="true" :text="textValue" :rtl-enabled="rtlEnabled" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Switch</div> <div class="dx-field-value"> <DxSwitch :rtl-enabled="rtlEnabled" /> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxSelectBox from 'devextreme-vue/select-box'; import DxAutocomplete from 'devextreme-vue/autocomplete'; import DxCheckBox from 'devextreme-vue/check-box'; import DxSwitch from 'devextreme-vue/switch'; import DxTextArea from 'devextreme-vue/text-area'; import DxTextBox from 'devextreme-vue/text-box'; import DxNumberBox from 'devextreme-vue/number-box'; import DxTagBox from 'devextreme-vue/tag-box'; import { europeanUnion as europeanUnionData } from './data.js'; const languages = [ 'Arabic: Right-to-Left direction', 'English: Left-to-Right direction', ]; const europeanUnion = ref(europeanUnionData); const displayExpr = ref('nameEn'); const rtlEnabled = ref(false); const textValue = ref('text'); function onLanguageChanged(args) { const isRTL = args.value === languages[0]; displayExpr.value = isRTL ? 'nameAr' : 'nameEn'; rtlEnabled.value = isRTL; textValue.value = isRTL ? 'نص' : 'text'; } </script> <style> .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .options .dx-fieldset { margin: 0; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; padding-right: 15px; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@3.9.10/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

export const europeanUnion = [{ id: 1, nameAr: 'النمسا', nameEn: 'Austria', }, { id: 2, nameAr: 'بلجيكا', nameEn: 'Belgium', }, { id: 3, nameAr: 'بلغاريا', nameEn: 'Bulgaria', }, { id: 4, nameAr: 'كرواتيا', nameEn: 'Croatia', }, { id: 5, nameAr: 'قبرص', nameEn: 'Cyprus', }, { id: 6, nameAr: 'الجمهورية التشيكية', nameEn: 'Czech Republic', }, { id: 7, nameAr: 'الدنمارك', nameEn: 'Denmark', }, { id: 8, nameAr: 'استونيا', nameEn: 'Estonia', }, { id: 9, nameAr: 'فنلندا', nameEn: 'Finland', }, { id: 10, nameAr: 'فرنسا', nameEn: 'France', }, { id: 11, nameAr: 'ألمانيا', nameEn: 'Germany', }, { id: 12, nameAr: 'يونان', nameEn: 'Greece', }, { id: 13, nameAr: 'هنغاريا', nameEn: 'Hungary', }, { id: 14, nameAr: 'أيرلندا', nameEn: 'Ireland', }, { id: 15, nameAr: 'إيطاليا', nameEn: 'Italy', }, { id: 16, nameAr: 'لاتفيا', nameEn: 'Latvia', }, { id: 17, nameAr: 'ليتوانيا', nameEn: 'Lithuania', }, { id: 18, nameAr: 'لوكسمبورغ', nameEn: 'Luxembourg', }, { id: 19, nameAr: 'مالطا', nameEn: 'Malta', }, { id: 20, nameAr: 'هولندا', nameEn: 'Netherlands', }, { id: 21, nameAr: 'بولندا', nameEn: 'Poland', }, { id: 22, nameAr: 'البرتغال', nameEn: 'Portugal', }, { id: 23, nameAr: 'رومانيا', nameEn: 'Romania', }, { id: 24, nameAr: 'سلوفاكيا', nameEn: 'Slovakia', }, { id: 25, nameAr: 'سلوفينيا', nameEn: 'Slovenia', }, { id: 26, nameAr: 'إسبانيا', nameEn: 'Spain', }, { id: 27, nameAr: 'السويد', nameEn: 'Sweden', }, { id: 28, nameAr: 'المملكة المتحدة', nameEn: 'United Kingdom', }];