Vue Common - Utils - ui

An object that serves as a namespace for DevExtreme UI components as well as for methods implementing UI logic in DevExtreme sites/applications.

dialog

An object that serves as a namespace for methods displaying a message in an application/site.

dxOverlay

An object that serves as a namespace for static methods that affect overlay UI components.

notify(message, type, displayTime)

Creates a toast message.

import notify from "devextreme-vue/notify"
Parameters:
message:

String

The message's text.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify("Warning message", "warning", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify("Warning message", "warning", 500);
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify("Warning message", "warning", 500);
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify("Warning message", "warning", 500);
    }
}
export default App;

View Demo

notify(options, type, displayTime)

Creates a toast message.

import notify from "devextreme-vue/notify"
Parameters:
options:

Object

The Toast configuration.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify({ message: "Error message", width: 300, shading: true }, "error", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
Vue
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify({ message: "Error message", width: 300, shading: true }, "error", 500);
        })
    }
}
</script>
React
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    componentDidMount() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
export default App;
See Also

repaintFloatingActionButton()

Repaints the Floating Action Button.

import speedDialAction from "devextreme-vue/repaint-floating-action-button"

Call this method to repaint the Floating Action Button after you change the globalConfig.floatingActionButtonConfig at runtime:

jQuery
JavaScript
$(function() {
    // ...
    DevExpress.config({
        floatingActionButtonConfig: {
            // ...
        }
    });
    DevExpress.ui.repaintFloatingActionButton();
})
Angular
app.component.ts
import { Component } from '@angular/core';
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>
<script>
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

export default {
    methods: {
        changeFabConfig() {
            config({
                floatingActionButtonConfig: {
                    // ...
                }
            });
            repaintFloatingActionButton();
        }
    }
}
</script>
React
App.js
import React from 'react';

import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

class App extends React.Component {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
export default App;
See Also

themes

An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.

import ui.themes from "devextreme-vue/themes"