コンテンツへスキップ

hifiveのUIライブラリ紹介「タイルコンテナ」

by : 2017/03/03

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>

view raw

index.js

hosted with ❤ by GitHub

そして全体を覆っているクラスに対して h5.ui.components.tileContainer.tileContainerController を適用します。


h5.core.controller('.columns', h5.ui.components.tileContainer.tileContainerController);

view raw

index.html

hosted with ❤ by GitHub

後はデザインですが、例えば次のようにします。


.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
}

view raw

index.css

hosted with ❤ by GitHub

これだけでドラッグ&ドロップでタイルを移動できる機能ができあがります。


動作デモはこちらで確認できます。ダッシュボード系サービスなどで使ってみてください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。