Skip to main content
Version: 1.5.0

Dialog

Overview

The Dialog component displays a dialog box.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
iconstring""The icon displayed in upper left of content areaAvailable options:
  • "info" : info
  • "success" : success
  • "error" : error
  • "warning" : warning
  • "question" : question
  • "" : No icon
  • titlestring""Header Title
    content *1string/HTMLElement""DOM inside contentIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
    footer *1string/HTMLElement""DOM inside footerIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
    caution

    *1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

    Event

    Here is a list of events that can be specified:

    NameTypeDescriptionRemark
    closefunctionEvent handler when the component has been closedIt will pass the event object as the argument

    Constructor

    Dialog(options)
    Here is a list of available constructors:

    Parameter

    NameTypeDefaultDescriptionRemark
    optionsobject{}Object that includes component properties

    Method

    Here is a list of available methods:

    open()

    Show the Dialog

    Parameter

    none

    Return

    none

    close()

    Hide the Dialog

    Parameter

    none

    Return

    none


    Sample Code

    tip

    Please check the package installation method first.

    Here is a sample code when all parameters are specified:

    const Kuc = Kucs['1.x.x'];

    const dialog = new Kuc.Dialog({
    title: 'Title',
    content: '<div>This is Content</div>',
    footer: 'Footer',
    icon: 'info'
    });

    dialog.addEventListener('close', event => {
    console.log(event);
    });

    dialog.open();
    dialog.close();