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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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"
: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"
: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"
/>
</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]"
: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]"
: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"
/>
</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"
/>
</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>
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 } from './data.js';
export default {
components: {
DxSelectBox,
DxAutocomplete,
DxCheckBox,
DxSwitch,
DxTextArea,
DxTextBox,
DxNumberBox,
DxTagBox,
},
data() {
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 { 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/22.2.6/css/dx.light.css" />
<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',
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);