Material Components WebのSnackbar

Webアプリケーションの操作完了時には、flash（一時的なメッセージ変数）を通じて通知をフィードバックするケースが多くあります。

Material Components Webでは画面下から一時的にポップアップするSnackbarを活用できます。

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

Railsのflashと組み合わせた場合のコード例は以下のとおりです。（MaterialComponentsの初期化は含んでいますが、ライブラリ（JS/CSS）インクルードは別途必要）

&lt;section class="mdc-snackbar" aria-live="assertive" aria-atomic="true" aria-hidden="true" data-mdc-auto-init="MDCSnackbar">
  &lt;div class="mdc-snackbar__text">&lt;/div>
  &lt;div class="mdc-snackbar__action-wrapper">
    &lt;button type="button" class="mdc-button mdc-snackbar__action-button">&lt;/button>
  &lt;/div>
&lt;/section>

&lt;script>
  window.mdc.autoInit();
  var snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));

&lt;% if flash[:notice].present? %>
  var dataObj = { message: "&lt;%= notice %>" };
snackbar.show(dataObj);
&lt;% end %>
&lt;/script>

各画面の通知インターフェースをSnackbarに集約する場合は、共通テンプレートに実装しておけばflashの処理以外の再実装を避けられます。

⁋ 2017/09/11↻ 2024/11/07