Railsでぺージ内タブを実装する(powerd by BootStrap)
今回はBootstrapを使ってRailsアプリにぺージ内タブを実装します。
Rails内でBootstrapを使うにはtwitter-bootstrap-rails gemを導入しておく必要がありますので、あらかじめこのあたりのぺージを参考に 導入しておいてください。
seyhunak/twitter-bootstrap-rails · GitHub
RailsにTwitter Bootstrapの導入と簡易な使い方 - Rails Webook
htmlを作成
導入できたらhtmlを作成します(別途 application.htmlはある前提です)
"nav nav-tabs"クラス配下がタブリストになっていて、"tab-content"クラス配下が各タブの内容になっています。
"active" クラスが現在選択されているタブです。
tab_sample.html
<div> <ul class="nav nav-tabs" role="tablist"> <li class="active" role="presentation"> <a aria-controls="tab_a" data-toggle="tab" href="#tab_a" role="tab">A</a> </li> <li role="presentation"> <a aria-controls="tab_b" data-toggle="tab" href="#tab_b" role="tab">B</a> </li> <li role="presentation"> <a aria-controls="tab_c" data-toggle="tab" href="#tab_c" role="tab">C</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_a" role="tabpanel"> <p> タブAだよ </p> </div> <div class="tab-pane" id="tab_b" role="tabpanel"> <p> タブBです </p> </div> <div class="tab-pane" id="tab_c" role="tabpanel"> <p> タブC!! </p> </div> </div> </div>
画面で確認
画面で確認してみます。
Bootstrapっぽい、いい感じなタブになってますね!
思っていたよりも遥かに簡単でした!Bootstrapすごい!