Office UI Fabricをソースコードからビルドすると、いくつかサンプルが付属してきます。その中にはダイアログボックスに関するサンプルもあるのですが、ダイアログの表示のみで、肝心のダイアログボックスの表示と非表示に関するサンプルコードがありません。
そこで今回はOffice UI Fabricのダイアログボックスを操作する方法を調べてみました。ただし、Office UI Fabricnのドキュメント等で解説されている方法ではないので、もしかしたら非推奨な方法かもしれません。
以降の例で示すサンプルは以下のURLで試すことができます。
Office UI Fabricのダイアログボックス
最小限のダイアログボックス
ダイアログボックスは以下のタグで作成できます。ポイントは最初の行にある「<div class="ms-Dialog" id="dialog1" style="visibility:hidden;">」です。これが無いとWebページ表示時にいきなりダイアログボックスが表示されてしまいます。ソースコード内を検索してみましたが、"ms-Dialog--hidden"というようなスタイルは存在しませんでした。
<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で切り替えているだけです。
MinimalDialog = (function() {
var dialog = document.getElementById("dialog1");
function show() {
dialog.style.visibility = "visible";
};
function close() {
dialog.style.visibility = "hidden";
};
return {
"show" : show,
"close" : close
};
}());
表示は以下のようになります。
カスタムダイアログを作る
ダイアログボックスの基本的な使用方法が把握できたので、もう一歩進めてMessageBox風のダイアログボックスを表示するサンプルを作ってみました。実際に試してもらうのが早いかと思います。
例えば、以下のようなダイアログが表示できます。
また、ms-Dialog--lgHeaderスタイルを指定することで、ダイアログボックスのヘッダを強調できます。
その他
ダイアログボックスのサイズについて
便利なダイアログボックスですが、Twitter Bootstrapにおけるjschr/bootstrap-modalのような使い方ができるかというと、そうではなさそうです。
先のMessageBox風サンプルで長いメッセージを表示させると、以下のような表示になります。どうも横幅が小さめに設定されるようです。グリッドレイアウトも試してみましたが、現状では横幅を制御することはできなさそうです。
まとめ
Office UI Fabricのダイアログボックスの使い方を調べてみました。基本UIにダイアログが用意されているのは便利ですね。ここ1,2日ほどOffice UI Fabricを試していますが、便利なUIフレームワークだなという気がしてきています。この調子でノウハウを蓄積してゆこうと思います。