hifiveのUIライブラリ紹介「タイルコンテナ」
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
まずHTMLの構造はタイル表示になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 を適用します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h5.core.controller('.columns', h5.ui.components.tileContainer.tileContainerController); |
後はデザインですが、例えば次のようにします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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システムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。