[Webix]レイアウトシステム

最終更新日

Webix Advent Calendar 2014 2日目の記事です。

Webix Layoute

Webixには、簡単に使えて様々なコンポーネントを自在に配置できる優れたレイアウトシステムがあります。本日はWebixのレイアウトシステムについて紹介します。

Layout and Resizer Webix Docs

レイアウト

Webixにおけるレイアウトとは、コンポーネントとの配置を決定するだけの概念的な要素となります。JSON形式でrowsやcolsキーにコンポーネントを含んだ配列を渡すことで設定します。

Horizontal layout

rowsは、コンポーネントを垂直に配置する際に使用します。

example

Vertical layout

colsは、コンポーネントを水平に配置する際に使用します。

example

Complex layout

任意の行(rows)を列(cols)で分割することができます。
ネストすることで複雑なレイアウトを設定することができます。

example

リサイズビュー

リサイズビューは、レイアウトによって配置されたコンポーネント間でサイズの変更を可能にします。

example