DevExtreme Vue - Relocate an Item
Toolbar items are aligned to the left (right if rtlEnabled is true) and preserve the order they have in the items array. Use the location option to override the order.
This option accepts the "before", "center", and "after" values that specify a toolbar item's location relative to that of other items. In the code below, it is used to order items as follows: alignLeft
, alignRight
, color
, background
, undo
, and redo
. Note that alignLeft
and alignRight
assume the default value, "before".
- <template>
- <DxHtmlEditor>
- <DxToolbar>
- <DxItem
- format-name="undo"
- location="after"
- />
- <DxItem
- format-name="redo"
- location="after"
- />
- <DxItem format-name="alignLeft"/>
- <DxItem format-name="alignRight"/>
- <DxItem
- format-name="color"
- location="center"
- />
- <DxItem
- format-name="background"
- location="center"
- />
- </DxToolbar>
- </DxHtmlEditor>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import {
- DxHtmlEditor,
- DxToolbar,
- DxItem
- } from 'devextreme-vue/html-editor';
- export default {
- components: {
- DxHtmlEditor,
- DxToolbar,
- DxItem
- }
- }
- </script>
If the toolbar cannot fit all the items, some of them are collected in the overflow menu. Use the locateInMenu option to change this behavior:
- <template>
- <DxHtmlEditor>
- <DxToolbar>
- <DxItem
- format-name="undo"
- locate-in-menu="always"
- />
- <DxItem
- format-name="color"
- locate-in-menu="never"
- />
- </DxToolbar>
- </DxHtmlEditor>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import {
- DxHtmlEditor,
- DxToolbar,
- DxItem
- } from 'devextreme-vue/html-editor';
- export default {
- components: {
- DxHtmlEditor,
- DxToolbar,
- DxItem
- }
- }
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.