Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Common/utils/ui/dialog/ below:

Vue Common - Utils - ui - dialog

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

Displays an alert dialog with a message and OK button.

import { DxDialogTypes } from "devextreme-vue/dialog"

The dialog's message.
Can contain HTML markup that will be evaluated. Make sure that the markup does not contain malicious code.
Refer to the following help topic for more information: Potentially Vulnerable API - messageHtml.

The dialog's title.

Creates a confirmation dialog with a message and Yes and No buttons.

import { DxDialogTypes } from "devextreme-vue/dialog"

The dialog's message.
Can contain HTML markup that will be evaluated. Make sure that the markup does not contain malicious code.
Refer to the following help topic for more information: Potentially Vulnerable API - messageHtml.

The dialog's title.

A Promise that is resolved with a Boolean value indicating whether a user has clicked Yes or No. It is a native Promise or a jQuery.Promise when you use jQuery.

$(function() {
    var result = DevExpress.ui.dialog.confirm("<i>Are you sure?</i>", "Confirm changes");
    result.done(function(dialogResult) {
        alert(dialogResult ? "Confirmed" : "Canceled");
    });
})

import { Component, AfterViewInit } from '@angular/core';
import { confirm } from 'devextreme/ui/dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
    ngAfterViewInit() { 
        let result = confirm("<i>Are you sure?</i>", "Confirm changes");
        result.then((dialogResult) => {
            alert(dialogResult ? "Confirmed" : "Canceled");
        });
    }
}

<template>
</template>
<script>
import { confirm } from 'devextreme/ui/dialog';

export default {
    mounted: function() {
        this.$nextTick(function() {
            let result = confirm("<i>Are you sure?</i>", "Confirm changes");
            result.then((dialogResult) => {
                alert(dialogResult ? "Confirmed" : "Canceled");
            });
        })
    }
}
</script>

import React from 'react';
import { confirm } from 'devextreme/ui/dialog';

class App extends React.Component {
    componentDidMount() { 
        let result = confirm("<i>Are you sure?</i>", "Confirm changes");
        result.then((dialogResult) => {
            alert(dialogResult ? "Confirmed" : "Canceled");
        });
    }
}
export default App;

Creates a dialog with custom buttons.

import { DxDialogTypes } from "devextreme-vue/dialog"

The dialog's properties.

Object structure:

Array<Button Configuration>

Buttons to be displayed in the dialog.

Boolean

Specifies whether the dialog window can be dragged. Defaults to the showTitle value.
Ensure the showTitle field is not explicitly set to false because a user can drag the dialog only by its title.

String

Use 'messageHtml' instead.

The dialog's message. Deprecated in favor of the messageHtml field.

String

The dialog's message.
Can contain HTML markup that will be evaluated. Make sure that the markup does not contain malicious code.
Refer to the following help topic for more information: Potentially Vulnerable API - messageHtml.

Boolean

Specifies whether to show the title. Defaults to true.

String

The dialog's title.

An object that represents the dialog.

The custom(options) method only creates a dialog. To display it, call the dialog instance's show() method. This method returns a Promise. To identify the clicked button, implement a Promise fulfillment handler. The dialog result is passed to the handler and contains anything you return from the clicked button's onClick function.

In the following code, the clicked button is identified by its text. The messageHtml field contains text with HTML tags.

$(function() {
    var myDialog = DevExpress.ui.dialog.custom({
        title: "Custom dialog",
        messageHtml: "<b>Dialog with custom buttons</b>",
        buttons: [{
            text: "button 1",
            onClick: function(e) {
                return { buttonText: e.component.option("text") }
            }
        }, 
        // ...
        ]
    });
    myDialog.show().done(function(dialogResult) {
        console.log(dialogResult.buttonText);
    });
})

import { Component, AfterViewInit } from '@angular/core';
import { custom } from 'devextreme/ui/dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        let myDialog = custom({
            title: "Custom dialog",
            messageHtml: "<b>Dialog with custom buttons</b>",
            buttons: [{
                text: "button 1",
                onClick: (e) => {
                    return { buttonText: e.component.option("text") }
                }
            }, 
            // ...
            ]
        });
        myDialog.show().then((dialogResult) => {
            console.log(dialogResult.buttonText);
        });
    }
}

<template>
</template>
<script>
import { custom } from 'devextreme/ui/dialog';

export default {
    mounted: function() {
        this.$nextTick(function() {
            let myDialog = custom({
                title: "Custom dialog",
                messageHtml: "<b>Dialog with custom buttons</b>",
                buttons: [{
                    text: "button 1",
                    onClick: (e) => {
                        return { buttonText: e.component.option("text") }
                    }
                }, 
                // ...
                ]
            });
            myDialog.show().then((dialogResult) => {
                console.log(dialogResult.buttonText);
            });
        })
    }
}
</script>

import React from 'react';
import { custom } from 'devextreme/ui/dialog';

class App extends React.Component {
    componentDidMount() {
        let myDialog = custom({
            title: "Custom dialog",
            messageHtml: "<b>Dialog with custom buttons</b>",
            buttons: [{
                text: "button 1",
                onClick: (e) => {
                    return { buttonText: e.component.option("text") }
                }
            }, 
            // ...
            ]
        });
        myDialog.show().then((dialogResult) => {
            console.log(dialogResult.buttonText);
        });
    }
}
export default App;

Call the hide() method to close the dialog before any button is clicked. In the following code, the dialog is closed after 5 seconds if a user does not click any button:

setTimeout(function() { myDialog.hide(); }, 5000);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4