menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

ダイアログ

mdui のダイアログは非常に用途の広いコンポーネントで、ユーザーに情報を尋ねたり、通知や警告を行ったりするために頻繁に使用されます。

同時に表示されるダイアログは 1 つだけです。現在のダイアログが閉じられる前に次のダイアログを開いた場合、次のダイアログはキューに追加され、現在のダイアログが閉じられた後に開かれます。

使用方法

  1. カスタム属性での呼び出し
  2. JavaScript での呼び出し

関連情報

Material Design デザインガイドライン：コンポーネント - ダイアログ

スタイル

標準ダイアログ

これは標準的なダイアログです。

codeplay_arrow
例
<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

タイトルバーなし

このダイアログにはタイトルバーがありません。

codeplay_arrow
例
<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

垂直に並んだボタン

ダイアログ下部のボタンはデフォルトで水平に並びます。<div class="mdui-dialog-actions"></div> に .mdui-dialog-actions-stacked クラスを追加するだけで、ボタンを垂直に並べることができます。

codeplay_arrow
例
<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

固定されたタイトルとボタン

ダイアログのコンテンツがダイアログの高さを超えると、.mdui-dialog-content 内にスクロールバーが表示されます。

.mdui-dialog-title と .mdui-dialog-actions を .mdui-dialog-content の内側に配置すると、タイトルと下部のボタンはスクロールに合わせて移動します。逆に、外側に配置すると、タイトルとボタンはそれぞれ上部と下部に固定され、スクロールしても移動しません。

codeplay_arrow
例
<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

カスタムコンテンツ

ダイアログでは <div class="mdui-dialog"></div> だけが必須であり、その中のコンテンツは任意の HTML に置き換えることができます。

以下の例では、ダイアログ内にタブを配置しています：

codeplay_arrow
例
<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

使用方法

カスタム属性での呼び出し

この方法では、JavaScript コードを記述する必要はありません。制御する要素（例：ボタン）に mdui-dialog="options" 属性を追加するだけです。カスタム属性を使用して呼び出す場合は、制御対象のダイアログを指定するための target パラメーターを追加する必要があります。値は制御対象のダイアログの CSS セレクターです。

codeplay_arrow
例
<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

ダイアログ内の要素にいくつかの属性を追加して、イベントをバインドできます。これらの属性は、JavaScript を使用して呼び出す場合でも使用できます。

属性説明
mdui-dialog-closeこの要素をクリックすると、close.mdui.dialog イベントがトリガーされ、ダイアログが閉じます。
mdui-dialog-cancelこの要素をクリックすると、cancel.mdui.dialog イベントがトリガーされます。
mdui-dialog-confirmこの要素をクリックすると、confirm.mdui.dialog イベントがトリガーされます。

JavaScript での呼び出し

インスタンス化：

// selector は、ダイアログの CSS セレクター、DOM 要素、または HTML 文字列です。
// options は設定パラメーターです。以下のパラメーターリストを参照してください。
var inst = new mdui.Dialog(selector, options);
実行

パラメータ

パラメータ名タイプデフォルト値説明
overlaybooleantrueダイアログを開くときにオーバーレイを表示するかどうか。
historybooleantrueダイアログを開くときに URL ハッシュを追加するかどうか。true の場合、ダイアログを開いた後にブラウザの戻るボタンや Android の戻るキーでダイアログを閉じることができます。
modalbooleanfalseダイアログをモーダルにするかどうか。falseの場合、ダイアログの外側の領域をクリックするとダイアログが閉じますが、それ以外の場合は閉じません。
closeOnEscbooleantrueEscキーを押したときにダイアログを閉じるかどうか。
closeOnCancelbooleantrueキャンセルボタンを押したときにダイアログを閉じるかどうか。
closeOnConfirmbooleantrue確認ボタンを押したときにダイアログを閉じるかどうか。
destroyOnClosedbooleanfalseダイアログを閉じた後、自動的に破棄するかどうか。

メソッド

メソッド名説明
open()ダイアログを開きます。
close()ダイアログを閉じます。
toggle()ダイアログの表示状態を切り替えます。
getState()ダイアログの状態を取得します。4つの状態（opening、opened、closing、closed）があります。
destroy()ダイアログを破棄します。
handleUpdate()ダイアログの位置とスクロールバーの高さを再調整します。ダイアログを開いた後にコンテンツを変更した場合は、このメソッドを呼び出す必要があります。

イベント

イベント名説明ターゲットパラメータ
open.mdui.dialogダイアログのオープンアニメーションが開始されたときにトリガーされます。<div class="mdui-dialog"></div>event._detail.inst：インスタンス
opened.mdui.dialogダイアログのオープンアニメーションが終了したときにトリガーされます。
close.mdui.dialogダイアログのクローズアニメーションが開始されたときにトリガーされます。
closed.mdui.dialogダイアログのクローズアニメーションが終了したときにトリガーされます。
cancel.mdui.dialogキャンセルボタンが押されたときにトリガーされます。
confirm.mdui.dialog確認ボタンが押されたときにトリガーされます。

定義済みダイアログ

mduiは、一般的なシナリオ向けに事前に定義されたいくつかのダイアログ関数を提供しています。これらの定義済みダイアログはJavaScriptのみで呼び出され、HTMLコードを記述する必要はありません。

これらの関数はすべてダイアログのインスタンスを返します。

mdui.dialog()

タイトル、コンテンツ、ボタンなどをカスタマイズできるダイアログを開きます。このメソッドは汎用的であり、mdui.alert()、mdui.confirm()、mdui.prompt() はすべてこのメソッドを使用してカプセル化されています。

mdui.dialog(options)
codeplay_arrow
例
mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'キャンセル'
    },
    {
      text: '確認',
      onClick: function(inst){
        mdui.alert('確認ボタンをクリックした時のコールバック');
      }
    }
  ]
});

パラメータ

パラメータ名タイプデフォルト値説明
titlestringダイアログのタイトル。
contentstringダイアログのコンテンツ。
buttonsarrayボタンの配列。各ボタンは、ボタンパラメーターを持つオブジェクトです（下の表を参照）。
stackedButtonsbooleanfalseボタンを垂直に並べるかどうか。
cssClassstring.mdui-dialog に追加される CSS クラス。
historybooleantruehashchange イベントをリッスンするかどうか。trueの場合、Androidの戻るキーやブラウザの戻るボタンでダイアログを閉じることができます。
overlaybooleantrueダイアログを開いた後にオーバーレイを表示するかどうか。
modalbooleanfalseダイアログをモーダルにするかどうか。falseの場合、ダイアログの外側の領域をクリックするとダイアログが閉じますが、それ以外の場合は閉じません。
closeOnEscbooleantrueEscキーを押したときにダイアログを閉じるかどうか。
destroyOnClosedbooleantrueダイアログを閉じた後、自動的に破棄するかどうか。
onOpenfunctionオープンアニメーション開始時のコールバック。引数はダイアログのインスタンスです。
onOpenedfunctionオープンアニメーション終了時のコールバック。引数はダイアログのインスタンスです。
onClosefunctionクローズアニメーション開始時のコールバック。引数はダイアログのインスタンスです。
onClosedfunctionクローズアニメーション終了時のコールバック。引数はダイアログのインスタンスです。

ボタンのパラメーター：

パラメータ名タイプデフォルト値説明
textstringボタンのテキスト。
boldbooleanfalseボタンのテキストを太字にするかどうか。
closebooleantrueボタンをクリックした後にダイアログを閉じるかどうか。
onClickfunctionボタンがクリックされたときのコールバック関数。

mdui.alert()

タイトル、コンテンツ、および確認ボタンを含むアラートを開きます：

mdui.alert(text, onConfirm, options)
mdui.alert(text, title, onConfirm, options)
codeplay_arrow
例
// テキストのみ
mdui.alert('content');

// タイトルとテキストを含む
mdui.alert('content', 'title');

// コールバックを含む
mdui.alert('content', 'title', function() {
  mdui.alert('確認ボタンがクリックされました');
});

// テキストとコールバックを含む
mdui.alert('content', function() {
  mdui.alert('確認ボタンがクリックされました');
});
  • text: テキスト
  • title: （オプション）タイトル
  • onConfirm: （オプション）確認ボタンをクリックした時のコールバック。引数はダイアログのインスタンスです。
  • options: （オプション）パラメーター。下の表を参照してください。
パラメータ名タイプデフォルト値説明
confirmTextstringok確認ボタンのテキスト。
historybooleantruehashchange イベントをリッスンするかどうか。trueの場合、Androidの戻るキーやブラウザの戻るボタンでダイアログを閉じることができます。
modalbooleanfalseダイアログをモーダルにするかどうか。falseの場合、ダイアログの外側の領域をクリックするとダイアログが閉じますが、それ以外の場合は閉じません。
closeOnEscbooleantrueEscキーを押したときにダイアログを閉じるかどうか。
closeOnConfirmbooleantrue確認ボタンを押したときにダイアログを閉じるかどうか。

mdui.confirm()

タイトル、コンテンツ、確認ボタン、およびキャンセルボタンを含む確認ダイアログを開きます：

mdui.confirm(text, onConfirm, onCancel, options)
mdui.confirm(text, title, onConfirm, onCancel, options)
codeplay_arrow
例
// テキストと確認コールバックを含む
mdui.confirm('content', function(){
  mdui.alert('確認ボタンがクリックされました');
});

// テキスト、確認ボタン、およびキャンセルボタンのコールバックを含む
mdui.confirm('content',
  function(){
    mdui.alert('確認ボタンがクリックされました');
  },
  function(){
    mdui.alert('キャンセルボタンがクリックされました');
  }
);

// テキスト、タイトル、および確認ボタンのコールバックを含む
mdui.confirm('content', 'title', function(){
  mdui.alert('確認ボタンがクリックされました');
});

// テキスト、タイトル、確認ボタン、およびキャンセルボタンのコールバックを含む
mdui.confirm('content', 'title',
  function(){
    mdui.alert('確認ボタンがクリックされました');
  },
  function(){
    mdui.alert('キャンセルボタンがクリックされました');
  }
);
  • text: テキスト
  • title: （オプション）タイトル
  • onConfirm: （オプション）確認ボタンをクリックした時のコールバック。引数はダイアログのインスタンスです。
  • onCancel: （オプション）キャンセルボタンをクリックした時のコールバック。引数はダイアログのインスタンスです。
  • options: （オプション）パラメーター。下の表を参照してください。
パラメータ名タイプデフォルト値説明
confirmTextstringok確認ボタンのテキスト。
cancelTextstringcancelキャンセルボタンのテキスト。
historybooleantruehashchange イベントをリッスンするかどうか。trueの場合、Androidの戻るキーやブラウザの戻るボタンでダイアログを閉じることができます。
modalbooleanfalseダイアログをモーダルにするかどうか。falseの場合、ダイアログの外側の領域をクリックするとダイアログが閉じますが、それ以外の場合は閉じません。
closeOnEscbooleantrueEscキーを押したときにダイアログを閉じるかどうか。
closeOnCancelbooleantrueキャンセルボタンを押したときにダイアログを閉じるかどうか。
closeOnConfirmbooleantrue確認ボタンを押したときにダイアログを閉じるかどうか。

mdui.prompt()

ユーザーに入力を促すダイアログを開きます。これには、タイトル、コンテンツ、テキストフィールド、確認ボタン、およびキャンセルボタンが含まれます：

mdui.prompt(label, onConfirm, onCancel, options)
mdui.prompt(label, title, onConfirm, onCancel, options)
codeplay_arrow
例
// 単一行テキストフィールド
mdui.prompt('これは単一行のテキストフィールドです',
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', 確認ボタンがクリックされました');
  },
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', キャンセルボタンがクリックされました');
  }
);

// 複数行テキストフィールド
mdui.prompt('これは複数行のテキストフィールドです',
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', 確認ボタンがクリックされました');
  },
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', キャンセルボタンがクリックされました');
  },
  {
    type: 'textarea'
  }
);

// タイトルを含む
mdui.prompt('テキストを入力してください', 'title',
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', 確認ボタンがクリックされました');
  },
  function (value) {
    mdui.alert('次のように入力されました：' + value + ', キャンセルボタンがクリックされました');
  }
);
  • label: テキストフィールドのフローティングラベルのテキスト
  • title: （オプション）タイトル
  • onConfirm: （オプション）確認ボタンをクリックした時のコールバック。2つの引数（テキストフィールドの値とダイアログのインスタンス）を持ちます。
  • onCancel: （オプション）キャンセルボタンをクリックした時のコールバック。2つの引数（テキストフィールドの値とダイアログのインスタンス）を持ちます。
  • options: （オプション）パラメーター。下の表を参照してください
パラメータ名タイプデフォルト値説明
confirmTextstringok確認ボタンのテキスト
cancelTextstringcancelキャンセルボタンのテキスト
historybooleantruehashchange イベントをリッスンするかどうか。trueの場合、Androidの戻るキーやブラウザの戻るボタンでダイアログを閉じることができます。
modalbooleanfalseダイアログをモーダルにするかどうか。falseの場合、ダイアログの外側の領域をクリックするとダイアログが閉じますが、それ以外の場合は閉じません。
closeOnEscbooleantrueEscキーを押したときにダイアログを閉じるかどうか。
closeOnCancelbooleantrueキャンセルボタンを押したときにダイアログを閉じるかどうか
closeOnConfirmbooleantrue確認ボタンを押したときにダイアログを閉じるかどうか
confirmOnEnterbooleanfalseEnterキーを押したときに onConfirm コールバック関数をトリガーします。
typestringtextテキストフィールドのタイプ。
  • text: 単一行テキストフィールド
  • textarea: 複数行テキストフィールド
maxlengthint0最大入力文字数
defaultValuestring''テキストフィールドのデフォルト値

CSS クラス一覧

クラス名説明
.mdui-dialogダイアログコンポーネントを定義します。
.mdui-dialog-titleダイアログのタイトルを定義します。
.mdui-dialog-contentダイアログのコンテンツを定義します。
.mdui-dialog-actionsダイアログのアクションバーを定義します。
.mdui-dialog-actions-stackedダイアログのアクションバーのボタンを垂直に並べます。
arrow_backPrevious
テーブル
arrow_forwardNext
メニュー