以前にAngular Material で split bar を実現するというしょぼい記事を書いたが、もっと簡単綺麗にスプリットバーを実現するライブラリを発見したので紹介したい。
というか、以前からいろいろあるのは知っていたが、AngularMaterialを使っている以上、余計なライブラリを入れずにMaterialだけで完結させようとしていたが、どうやらPCデスクトップ向けのSPA画面をMaterialの思想に準拠して作るのは多分に無理がある気がしてきたので、よそのライブラリを導入することにした。
ui-layout
ui-layout
angular-uiに属するプロジェクトで、開発が今も続いている。
AngularMaterialとui-routerと同居させてしばらくたつが、とくに副作用なく正常に動作している。
まずライブラリをインストール
bower install angular-ui-layout
HTMLのヘッダーで指定
<script src="bower/angular-ui-layout/src/ui-layout.js"></script>
<link rel="stylesheet" href="bower/angular-ui-layout/src/ui-layout.css">
モジュールで指定
angular.module('MyApp', ['ui.layout'])
お望みのレイアウトを記述
<div ui-layout="{flow:'row', dividerSize:8, disableToggle:true}"
style="overflow-x: hidden; overflow-y: hidden;">
<div ui-layout-container size="100px" style="overflow-x: hidden; overflow-y: hidden;" ></div>
<div ui-layout-container="central" style="overflow-x: hidden; overflow-y: hidden;"></div>
<div ui-layout-container size="10px" style="overflow-x: hidden; overflow-y: hidden;"></div>
</div>
これで完成。
ポイントがいくつかある。
一点目はui-layoutに含まれるui-layout-containerのうちどれか一つに"central"を指定すること。ウィンドウ全体をリサイズするとcentralに指定したdivのサイズが変化する。centralがどこにもないと動きがおかしくなる。
もう一点はWindowsではoverflow:hidden;を指定しないとスクロールバーがちらつくので、スクロールバーが必要なdiv以外は全て指定すること。レイアウトを入れ子にしていくとこの現象が顕著になる。もちろんスタイルシートに書いてしまってもいい。
以上なのだが、angularMaterialとui-routerとの同居例もあげておく
<div ui-layout-container>
<div layout="row">
<div flex align="center">hoge</div>
<div>hage</div>
<div>hoge</div>
</div>
</div>
ui-layoutの下でangulaMaterialのlayoutを使っているが全く問題ない。
ちなみにanuglarMaterialのlayoutは横幅を指定するのは便利だが、縦については100%に広げることができない。
よって縦のレイアウトはdividerSize:0のui-layoutで行い、細かい横のレイアウトはanuglaMaterialのlayoutにさせるといい。
<body ng-controller="IndexController">
<div ui-view></div>
</body>
<div ui-layout="{flow:'row', dividerSize:8, disableToggle:true}">
<div ui-layout-container size="100px"></div>
<div ui-layout-container="central">
<div ui-view></div>
</div>
<div ui-layout-container size="100px"></div>
</div>
<div ui-layout="{flow:'column', dividerSize:8, disableToggle:true}">
<div ui-layout-container></div>
<div ui-layout-container></div>
</div>
こんなかんじ。
画面の切り替え等含め驚くほど完ぺきに動作してくれる。