Help us understand the problem. What is going on with this article?

Office UI FabricのSpinnerとOverlay(モーダル表示UI)

More than 3 years have passed since last update.

今日はOffice UI Fabric(以下"OfficeUI")のSpinnerOverlayについて解説します。

Spinnerはくるくる回る表示を行うだけのもので、時間のかかる処理を実行中であることをユーザに知らせるためのUIです。Overlayは他のUIを操作させないように画面(というかUI)をロックするためのものです。時間のかかる処理はSpinnerで表示しつつ、ユーザが何か操作するのを防止しておきたい場合に、この2つを組み合わせるのが定石ですね。

上記のような動作を想定したサンプルプログラムを作成してみました。表示は以下のようになります。OverlayでUIをロックしつつSpinnerを表示しています。「Cencel」ボタンで処理を中断できるようにするため、Spinnerはダイアログボックスの上に表示しています。ダイアログボックスについては10日目の記事をご参照ください。

img601.png

サンプルソースコードは以下になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Spinner Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <link rel="stylesheet" href="//dev.office.com/Modules/DevOffice.Fabric/Fabric/components/Spinner/Spinner.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//dev.office.com/Modules/DevOffice.Fabric/Fabric/components/Spinner/Spinner.js"></script>
    <script>
      $(document).ready(function() {
        if ($.fn.Spinner) {
          $('.ms-Spinner').Spinner();
        }
        // Vanilla JS Components
        if (typeof fabric !== "") {
          if ('Spinner' in fabric) {
            var element = document.querySelector('.ms-Spinner');
            var component = new fabric['Spinner'](element);
          }
        }
      });
    </script>
  </head>
  <body>
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
      <button class="ms-Button ms-Button--primary" onclick="APP.openDialog()">
        <span class="ms-Button-label">Spinner表示<span>
      </button>
    </div>
    <div class="ms-Dialog" id="dialog1" style="visibility:hidden;"> <!-- ダイアログボックス -->
      <div class="ms-Overlay ms-Overlay ms-Overlay--dark"></div>
        <div class="ms-Dialog-main">
          <div class="ms-Dialog-header">
            <p class="ms-Dialog-title">Spinnerサンプル</p>
          </div>
          <div class="ms-Dialog-inner">
            <div class="ms-Dialog-content">
              <div align="center">
                <div class="ms-Spinner"></div>
              </div>
            </div>
            <div class="ms-Dialog-actions">
              <div class="ms-Dialog-actionsRight">
                <button class="ms-Dialog-action ms-Button ms-Button--primary" onclick="APP.closeDialog()">
                  <span class="ms-Button-label">Cancel</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      APP = (function() {
        var isDialogShow = false;
        toggleShowState = function() {
          isDialogShow = !isDialogShow;
        };
        openDialog = function() {
          if (isDialogShow == false) {
            $('#dialog1').css('visibility', 'visible');
          } else {
            $('#dialog1').css('visibility', 'hidden');
          }
          toggleShowState();
        };
        closeDialog = function() {
          $('#dialog1').css('visibility', 'hidden');
          toggleShowState();
        };
        return {
          'toggleShowState': toggleShowState,
          'openDialog'   : openDialog,
          'closeDialog'  : closeDialog,
        };
      })();
    </script>
  </body>
</html>

Spinnerを使用する

HTML上でのSpinnerは以下のようにCSSを読み込みんでから、DIV要素で指定します。

<link rel="stylesheet" href="//dev.office.com/Modules/DevOffice.Fabric/Fabric/components/Spinner/Spinner.css">
...
<div class="ms-Spinner"></div>

ただし、ドロップダウンリストパネルの場合と同じく、以下のような処理でページ読み込み時にSpinnerを初期化する必要があります。

      $(document).ready(function() {
        if ($.fn.Spinner) {
          $('.ms-Spinner').Spinner();
        }
        // Vanilla JS Components
        if (typeof fabric !== "") {
          if ('Spinner' in fabric) {
            var element = document.querySelector('.ms-Spinner');
            var component = new fabric['Spinner'](element);
          }
        }
      });

そして、Spinner()の定義は以下のJavaScript内で定義されています。今回はこちらで独自に手を入れる必要がなかったのでMSのSpinnerサンプルで使用しているJavaScriptをそのまま利用(直リン……)しています。

<script src="//dev.office.com/Modules/DevOffice.Fabric/Fabric/components/Spinner/Spinner.js"></script>

Overlayを使用する

Overlayは以下の1行で指定します。

<div class="ms-Overlay ms-Overlay"></div>

上記のOverlay指定では、画面に白いもやがかかったような感じのモーダル表示になります。画面を暗くするような感じでモーダル感を強調したい場合は、以下のように「ms-Overlay--dark」クラスを追加指定します(サンプルプログラムではこちらを使用しています)。

<div class="ms-Overlay ms-Overlay ms-Overlay--dark"></div>

まとめ

今回はSpinnerとOverlayの解説を行いました。両方ともHTMLを1行指定するだけで良さそうだったので、サクッと記事を書き終えられそうと思っていたのですが、SpinnerにはJavaScript側で初期化が必要というワナにハマってしまいました。各UI毎にページ読み込み時点での初期化が必要・不要なものがあるようなので、後々Advent Calendarで解説できればと思います。

参考URL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした