hifiveのUIライブラリ紹介「タイルコンテナ」
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
まずHTMLの構造はタイル表示になります。
| <div class="columns"> | |
| <div class="column box_content"> | |
| <h1 class="header">カラム１</h1> | |
| </div> | |
| <div class="column box_content"> | |
| <h1 class="header">カラム２</h1> | |
| </div> | |
| <div class="column box_content"> | |
| <h1 class="header">カラム３</h1> | |
| </div> | |
| <div class="column column2 box_content"> | |
| <h1 class="header">2倍幅のカラム</h1> | |
| </div> | |
| <div class="column box_content"> | |
| <h1 class="header">カラム４</h1> | |
| </div> | |
| </div> |
そして全体を覆っているクラスに対して h5.ui.components.tileContainer.tileContainerController を適用します。
| h5.core.controller('.columns', h5.ui.components.tileContainer.tileContainerController); |
後はデザインですが、例えば次のようにします。
| .box_content { | |
| border: 2px solid #000; | |
| padding: 5px; | |
| border-radius: 5px; | |
| margin: 5px; | |
| height: 200px; | |
| width: 300px; | |
| } | |
| .box_content h1 { | |
| font-size: 1.2em; | |
| color: #ffffff; | |
| background-color: #797979; | |
| height: 30px; | |
| } | |
| .column2 { | |
| width: 620px | |
| } |
これだけでドラッグ&ドロップでタイルを移動できる機能ができあがります。
動作デモはこちらで確認できます。ダッシュボード系サービスなどで使ってみてください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
コメントは受け付けていません。