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

Dialog

Overview​

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

Specification​

Property​

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

NameTypeDefaultDescriptionRemark
iconstring""content 領域左上に表示するアイコン以下を指定できる:
  • "info" : info
  • "success" : success
  • "error" : error
  • "warning" : warning
  • "question" : question
  • "" : アイコンなし
    • titlestring""Header のタイトルheader が未指定の場合、title が表示される
    その他の場合、title は無視される
    content *1string/HTMLElement""Content の DOMHTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
    footer *1string/HTMLElement""Footer の DOMHTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
    header *1string/HTMLElement""Header の DOMHTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される
    containerHTMLElementdocument.bodyコンポーネントを追加する対象の要素デフォルトではトップレベルのドキュメントオブジェクトのボディを使うので、ほとんどの場合は document.body となる
    container が HTMLElement 以外の場合、エラーを出力する
    footerVisiblebooleantrueFooter の表示/非表示設定
    注意

    *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

    Custom CSS​

    ヒント

    Custom CSS をご確認ください。

    コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。

    Property​

    Name
    --kuc-dialog-header-font-size
    --kuc-dialog-header-color
    --kuc-dialog-max-width

    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,
      header: '<div>This is Header</div>',
      icon: 'info',
      container: document.body,
      footerVisible: true
    });

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

    dialog.open();
    dialog.close();
    に最終更新