Office UI Fabricでダイアログボックスを使用する(暫定版)

Office UI Fabricを[ソースコード](https://github.com/OfficeDev/Office-UI-Fabric)から[ビルド](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#building-fabric)すると、いくつかサンプルが付属してきます。その中にはダイアログボックスに関するサンプルもあるのですが、ダイアログの表示のみで、肝心のダイアログボックスの表示と非表示に関するサンプルコードがありません。

そこで今回はOffice UI Fabricのダイアログボックスを操作する方法を調べてみました。ただし、Office UI Fabricnのドキュメント等で解説されている方法ではないので、もしかしたら非推奨な方法かもしれません。

以降の例で示すサンプルは以下のURLで試すことができます。

 * http://furandon_pig.bitbucket.org/sample/officeui/dialog.html

# Office UI Fabricのダイアログボックス

## 最小限のダイアログボックス

ダイアログボックスは以下のタグで作成できます。ポイントは最初の行にある「&lt;div class="ms-Dialog" id="dialog1" style="visibility:hidden;"&gt;」です。これが無いとWebページ表示時にいきなりダイアログボックスが表示されてしまいます。ソースコード内を検索してみましたが、"ms-Dialog--hidden"というようなスタイルは存在しませんでした。

```html
<div class="ms-Dialog" id="dialog1" style="visibility:hidden;">
  <div class="ms-Overlay">
    <div class="ms-Dialog-main">
      <div class="ms-Dialog-header">
        <p class="ms-Dialog-title">タイトル</p>
      </div>
      <div class="ms-Dialog-inner">
        <div class="ms-Dialog-content">
          <label class="ms-Label">
            Hello,Dialog.
          </label>
        </div>
        <div class="ms-Dialog-actions">
          <div class="ms-Dialog-actionsRight">
            <button class="ms-Dialog-action ms-Button ms-Button--primary" onclick="MinimalDialog.close()">
              <span class="ms-Button-label">OK</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

ダイアログボックスの表示と非表示はJavsScriptで制御します(jQueryとかだともっとスマートに記述できると思います)。単にダイアログボックスのvisibilityスタイルをvisible/hiddenで切り替えているだけです。

```js
MinimalDialog = (function() {
  var dialog = document.getElementById("dialog1");

  function show() {
    dialog.style.visibility = "visible";
  };

  function close() {
    dialog.style.visibility = "hidden";
  };
  return {
    "show"  : show,
    "close" : close
  };
}());
```

表示は以下のようになります。

![img003.png](https://qiita-image-store.s3.amazonaws.com/0/61137/b84cd7c9-e548-2621-29a2-00397d4f2da1.png)

## カスタムダイアログを作る

ダイアログボックスの基本的な使用方法が把握できたので、もう一歩進めてMessageBox風のダイアログボックスを表示するサンプルを作ってみました。実際に試してもらうのが早いかと思います。

 * http://furandon_pig.bitbucket.org/sample/officeui/dialog.html

例えば、以下のようなダイアログが表示できます。

![img002.png](https://qiita-image-store.s3.amazonaws.com/0/61137/83838b2f-7ac9-f7c6-0956-e7ab6e0ee5fe.png)

また、ms-Dialog--lgHeaderスタイルを指定することで、ダイアログボックスのヘッダを強調できます。

![img004.png](https://qiita-image-store.s3.amazonaws.com/0/61137/69e48e92-6a0a-745d-c9de-03c5b3ccb65b.png)

## その他

### ダイアログボックスのサイズについて

便利なダイアログボックスですが、Twitter Bootstrapにおける[jschr/bootstrap-modal](https://github.com/jschr/bootstrap-modal)のような使い方ができるかというと、そうではなさそうです。

先のMessageBox風サンプルで長いメッセージを表示させると、以下のような表示になります。どうも横幅が小さめに設定されるようです。グリッドレイアウトも試してみましたが、現状では横幅を制御することはできなさそうです。

![img001.png](https://qiita-image-store.s3.amazonaws.com/0/61137/7495b72a-177d-d459-f85f-98d07cc2b66a.png)

# まとめ

Office UI Fabricのダイアログボックスの使い方を調べてみました。基本UIにダイアログが用意されているのは便利ですね。ここ1,2日ほどOffice UI Fabricを試していますが、便利なUIフレームワークだなという気がしてきています。この調子でノウハウを蓄積してゆこうと思います。

# 参考URL

* [Building Fabric](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#building-fabric)