[Webix]レイアウトシステム
Webix Advent Calendar 2014 ２日目の記事です。
Webixには、簡単に使えて様々なコンポーネントを自在に配置できる優れたレイアウトシステムがあります。本日はWebixのレイアウトシステムについて紹介します。
レイアウト
Webixにおけるレイアウトとは、コンポーネントとの配置を決定するだけの概念的な要素となります。JSON形式でrowsやcolsキーにコンポーネントを含んだ配列を渡すことで設定します。
Horizontal layout
rowsは、コンポーネントを垂直に配置する際に使用します。
|
1 2 3 4 5 6 7 8 |
webix.ui({ id:"layout", rows:[ { template:"row 1" }, { template:"row 2" }, { template:"row 3" } ] }); |
Vertical layout
colsは、コンポーネントを水平に配置する際に使用します。
|
1 2 3 4 5 6 7 8 |
webix.ui({ id:"layout", cols:[ { template:"col 1" }, { template:"col 2" }, { template:"col 3" } ] }); |
Complex layout
任意の行(rows)を列(cols)で分割することができます。
ネストすることで複雑なレイアウトを設定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
webix.ui({ id:"layout", rows:[ {template:"row 1"}, {template:"row 2"}, { cols:[ { template:"col 1" }, { template:"col 2" }, { template:"col 3" } ]} ] }); |
リサイズビュー
リサイズビューは、レイアウトによって配置されたコンポーネント間でサイズの変更を可能にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
webix.ui({ rows:[ {template:"header", height:35 }, {template:"row 1"}, {view:"resizer"}, //row1とrow2の境界をリサイズ可能に {template:"row 2"}, {view:"resizer"}, //row2とrow3の境界をリサイズ可能に { id:"row3", cols:[ { template:"col 1", minWidth:150 //col1の最少サイズ(幅) }, { view:"resizer", //col1とcol2の境界をリサイズ可能に }, { template:"col 2" }, { template:"col 3" } ] } ] }); |
