Skip to content

hifiveのUIコンポーネント紹介「タブ切り替え」

by : 2017/12/15

hifiveは業務システム開発用とあって、Bootstrapと組み合わせて使われることが多いのですが、Bootstrap側の制限が動作に影響を及ぼしてしまうことがあります。その一つとして今回はタブ切り替えを行うUIをhifive風に実装する方法を紹介します。

今回のデモはこちらにあります。

使い方

HTMLの記述

HTML側の記述は次のようになります。特徴としてはBootstrap標準ではidを使わなければならないところをクラスだけで指定しているところが異なります。

JavaScriptの記述

そしてJavaScriptはタブをクリックした際のイベントを取得して、コンテンツの表示/非表示を切り替えます。

さらにタブのグループ毎にコントローラを適用することで、各タブを独立させた状態で扱えるようになります。


この方法であればBootstrapのJavaScriptを使わずにタブ機能が実装できます。Bootstrapは便利なライブラリですが制約も多くなっていますので、カスタマイズしやすい形を目指すのであればこうした実装がお勧めです。

タブ切り替え

From → hifive

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

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