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">カラム1</h1> | |
</div> | |
<div class="column box_content"> | |
<h1 class="header">カラム2</h1> | |
</div> | |
<div class="column box_content"> | |
<h1 class="header">カラム3</h1> | |
</div> | |
<div class="column column2 box_content"> | |
<h1 class="header">2倍幅のカラム</h1> | |
</div> | |
<div class="column box_content"> | |
<h1 class="header">カラム4</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 | |
} |
これだけでドラッグ&ドロップでタイルを移動できる機能ができあがります。
動作デモはこちらで確認できます。ダッシュボード系サービスなどで使ってみてください。
コメントは受け付けていません。