メインコンテンツまでスキップ
バージョン: 1.5.0

Dialog

Overview

Dialog は、ダイアログボックスを表示します。


Specification

Property

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
iconstring""content 領域左上に表示するアイコン以下を指定できる:
  • "info" : info
  • "success" : success
  • "error" : error
  • "warning" : warning
  • "question" : question
  • "" : アイコンなし
  • titlestring""Header のタイトル
    content *1string/HTMLElement""Content の DOMHTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
    footer *1string/HTMLElement""Footer の DOMHTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
    注意

    *1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。

    Event

    指定できるイベントの一覧です。

    NameTypeDescriptionRemark
    closefunctionコンポーネントが閉じられた時のイベントハンドラ引数には Event の event オブジェクトをとる

    Constructor

    Dialog(options)
    使用できるコンストラクタの一覧です。

    Parameter

    NameTypeDefaultDescriptionRemark
    optionsobject{}コンポーネントのプロパティを含むオブジェクト

    Method

    使用できるメソッドの一覧です。

    open()

    Dialog を表示する

    Parameter

    none

    Return

    none

    close()

    Dialog を非表示にする

    Parameter

    none

    Return

    none


    Sample Code

    ヒント

    導入と実装方法 をご確認ください。

    全てのパラメータを指定した場合のサンプルコードです。

    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();