Vue Data Editors - 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.

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, { type DxSelectBoxTypes } 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.ts'; 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: DxSelectBoxTypes.ValueChangedEvent) { 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>

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', }];

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

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>