Dialog

Overview

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

---

Specification

Property

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

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

注意

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

Event

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

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

Constructor

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

Parameter

Name	Type	Default	Description	Remark
options	object	{}	コンポーネントのプロパティを含むオブジェクト

---

Method

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

open()

Dialog を表示する

Parameter

none

Return

none

close()

Dialog を非表示にする

Parameter

none

Return

none

---

Sample Code

ヒント

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

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

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

// Create OK and Cancel buttons
const okButton = new Kuc.Button({
  text: 'OK',
  type: 'submit'
});
const cancelButton = new Kuc.Button({
  text: 'Cancel',
  type: 'normal',
});
okButton.addEventListener('click', () => {
    // handle click OK button
})
cancelButton.addEventListener('click', () => {
    // handle click Cancel button
})
// Wrap OK and Cancel buttons with a div
const divEl = document.createElement('div');
divEl.appendChild(okButton)
divEl.appendChild(cancelButton)

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

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

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

---

Related Articles

• Format setting plug-in