Material Components Webのダイアログ

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

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

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

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

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

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

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

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

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

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

中馬崇尋
Chuma Takahiro

Litのコード構成

Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。……

Selenium Python

SeleniumはWebアプリケーションをE2Eテストするフレームワークです。ブラウザをスクリプト操……

Litの特徴

LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナ……

HTMLフォームからAPIコールするイディオム

HTMLフォームには主にPOSTのリクエストを投稿する機能があります。 onSubmitイベントにハン……

SVG画像にCSS変数を適用する

SVG画像はベクター画像標準としてWebで広く利用されています。またSVGはXMLでもあり、加工する……

Material Components Webのダイアログ

関連記事