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

hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はタイルコンテナを紹介します。タイルコンテナはドラッグ&ドロップで互いの位置を入れ替えるようなコンテナになります。

動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。

まずHTMLの構造はタイル表示になります。

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

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

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

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