Dialog

Documentation

Input Parameters

Name Type Description
className string The class name to apply to the main element.
el HTMLElement The element to render the dialog to.
actions Array<IButtonProps> The dialog actions.
content string The dialog content.
isBlocking boolean True for blocking dialogs.
isLargeHeader _boolean True for dialogs with large headers.
isMultiLine boolean True for multi-line dialogs.
showCloseButton boolean True to show the close button.
subText string The dialog sub text.
title string The dialog title.

IDialog Interface

Name Type/Description
get() Returns the fabric component.
getActions() Returns the actions container.
getContent() Returns the content container.
getTitle() Returns the title container.

Fabric Dialog Interface

Name Type/Description
_actionButtonElements The action button elements.
_closeButtonElement The close button element.
_dialog The dialog element.
close() Hides the dialog.
open() Shows the dialog.

JavaScript

var $REST = require("gd-sprest-js");

// Create the template
var el = document.querySelector("#dlg");
el.innerHTML = "<div></div><div></div>";

// Render the dialog
var dlg = $REST.JS.Fabric.Dialog({
    content: "<p>This is the dialog content.</p>",
    el: el.children[0],
    title: "My Dialog"
});

// Render the button
$REST.JS.Fabric.Button({
    el: el.children[1],
    text: "Show Dialog",
    onClick: function() {
        // Display the dialog
        dlg.get().open();
    }
});

TypeScript

import { Fabric } from "gd-sprest-js";

// Create the template
var el = document.querySelector("#dlg");
el.innerHTML = "<div></div><div></div>";

// Render the dialog
var dlg = Fabric.Dialog({
    content: "<p>This is the dialog content.</p>",
    el: el.children[0],
    title: "My Dialog"
});

// Render the button
Fabric.Button({
    el: el.children[1],
    text: "Show Dialog",
    onClick: () => {
        // Display the dialog
        dlg.get().open();
    }
});