Your search did not match any results.
Right-to-Left Support

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.

Copy to CodeSandBox
Apply
Reset
<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"> <dx-select-box :items="languages" :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"> <dx-text-box :show-clear-button="true" :value="textValue" :rtl-enabled="rtlEnabled" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Number Box</div> <div class="dx-field-value"> <dx-number-box :show-spin-buttons="true" :value="123" :rtl-enabled="rtlEnabled" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Select Box</div> <div class="dx-field-value"> <dx-select-box :items="europeanUnion" :value="europeanUnion[0]" :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"> <dx-tag-box :items="europeanUnion" :value="[europeanUnion[0].id]" :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"> <dx-text-area :value="textValue" :rtl-enabled="rtlEnabled" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Autocomplete</div> <div class="dx-field-value"> <dx-autocomplete :items="europeanUnion" :rtl-enabled="rtlEnabled" :value-expr="displayExpr" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Check Box</div> <div class="dx-field-value"> <dx-check-box :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"> <dx-switch :rtl-enabled="rtlEnabled" /> </div> </div> </div> </div> </div> </template> <script> import { DxSelectBox, DxAutocomplete, DxCheckBox, DxSwitch, DxTextArea, DxTextBox, DxNumberBox, DxTagBox } from 'devextreme-vue'; import { europeanUnion } from './data.js'; export default { components: { DxSelectBox, DxAutocomplete, DxCheckBox, DxSwitch, DxTextArea, DxTextBox, DxNumberBox, DxTagBox }, data: function() { return { europeanUnion, languages: [ 'Arabic: Right-to-Left direction', 'English: Left-to-Right direction' ], displayExpr: 'nameEn', rtlEnabled: false, textValue: 'text', onLanguageChanged: (args) => { const isRTL = args.value === this.languages[0]; this.displayExpr = isRTL ? 'nameAr' : 'nameEn'; this.rtlEnabled = isRTL; this.textValue = 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 Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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/19.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/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"> <span v-if="false">Loading...</span> </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' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });