Material Components Webのダイアログ

Material Components Webで拡充されたウィジェットに、ダイアログがあります。ダイアログを活用することで、画面遷移を減らして操作フローの連続性を向上できます。

ダイアログの実装方法は、 公式ドキュメントに解説があります。

HTMLブロックと初期化・表示処理の例は以下のようなものです（mdcライブラリ全体のインクルードと初期化は別途要）。

<aside id="sample-dialog" class="mdc-dialog" aria-labelledby="sample-dialog-label" aria-describedby="sample-dialog-description">
  <div class="mdc-dialog__surface">
    <header class="mdc-dialog__header">
      <span id="sample-dialog-label" class="mdc-dialog__header__title">タイトル</span>
    </header>
    <section id="sample-dialog-description" class="mdc-dialog__body mdc-dialog__body">

    </section>
    <footer class="mdc-dialog__footer">
      <button class="mdc-button mdc-dialog__footer__button--cancel">閉じる</button>
    </footer>
  </div>
  <div class="mdc-dialog__backdrop"></div>
</aside>

<script>
var dialog = new mdc.dialog.MDCDialog(document.querySelector('#sample-dialog'));

function open_dialog(evt) {
  dialog.lastFocusedTarget = evt.target;
  dialog.show();
}
</script>

ダイアログ表示関数をボタンなどにonclickで割り当てると表示できます。

<button onclick="open_dialog()">ダイアログを開く</button>

このように表示操作はJavascriptで実装する必要がありますが、ダイアログを閉じる操作は既成のmdc-dialog__footer__button--cancelに実装されているため、このclassを指定したボタンを置くだけで機能します。

⁋ 2017/09/09↻ 2024/11/07
中馬崇尋
Chuma Takahiro
deno test
denoのテスティング機能は、ツールを追加インストールせずに動作するテストランナーを提供しています。……
Javascriptの条件つきコンパイル
TypescriptやJavascriptの言語仕様には条件つきコンパイルを含むマクロがありませんが……
Litのコード構成
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。……
Selenium Python
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。 ブラウザをスクリプト操……
Litの特徴
LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナ……