hifiveのUIライブラリ紹介「タイルコンテナ」
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
まずHTMLの構造はタイル表示になります。
<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
を適用します。
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 | |
} |
これだけでドラッグ&ドロップでタイルを移動できる機能ができあがります。
動作デモはこちらで確認できます。ダッシュボード系サービスなどで使ってみてください。
コメントは受け付けていません。