Zenn
🛁

【Rails & HTML】Bootstrapでタブメニューを作る方法

2023/08/22に公開
Bootstrap
HTML
Rails
tab
tech

完成イメージは以下の通り。

公開中/下書き/非公開タブをクリックするとローディングすることなく切り替えられる。複数の情報を分けて表示、切り替えできるので使いやすい！

Bootstrap導入

導入方法を過去記事にも記載しなかったので記載します。方法は何個かあるが、今回はyarnでのインストール方法。

yarn install

ターミナルで以下を入力

ターミナル
yarn add jquery bootstrap@4.6.2 popper.js

environment.jsへの記載

environment.jsに以下を記載。

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

application.scssファイルの作成

app/javascript配下にstylesheetsフォルダを作成。

stlyesheetsフォルダにapplication.scssファイルを作成し以下の記述をする。

app/javascript/stylesheets/application.scss
@use '~bootstrap/scss/bootstrap';

application.jsの記述

application.jsに以下を追記する。

app/javascript/packs/application.js
:
import "channels"

+ import "jquery";
+ import "popper.js";
+ import "bootstrap";
+ import "../stylesheets/application"; 

Rails.start()
Turbolinks.start()
ActiveStorage.start()

application.htmlの記述

今回は、cssをapp/assets 配下で管理、JavaScriptをapp/javascript 配下で管理したいので、以下のようにする。

app/views/layouts/application.html.erb
:
:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    
:
:

これで使用準備が完了！

HTMLの作成

基本構造は次の通り。

html
<!-- タブとコンテンツの基本構造 -->
<div class="tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#section1">セクション1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#section2">セクション2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#section3">セクション3</a>
    </li>
  </ul>
  
  <div class="tab-content">
    <div id="section1" class="tab-pane fade show active">
      <p>セクション1のコンテンツが表示されます。</p>
    </div>
    <div id="section2" class="tab-pane fade">
      <p>セクション2のコンテンツが表示されます。</p>
    </div>
    <div id="section3" class="tab-pane fade">
      <p>セクション3のコンテンツが表示されます。</p>
    </div>
  </div>
</div>

動作の解説：
タブのリンクにはdata-toggle属性があり、クリックすると関連するコンテンツに切り替えることができる。
各コンテンツにはidが指定されていて、タブのhref属性と関連付けられている。これによって、どのタブがどのコンテンツを表示するかが決まる。

作成例

俺の場合は、投稿の①公開、②下書き、③非公開　と3つのタブに分けるようにしました。

html
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      
      <div class="tabs d-flex justify-content-between align-items-center">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#published">公開中</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#draft">下書き</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#unpublished">非公開</a>
          </li>
        </ul>
        
        <a href="<%= new_post_path %>" class="new-post-btn ml-auto">新規投稿</a>
      </div>
      
      <div class="tab-content">
        <div id="published" class="tab-pane fade show active">
          <% @published_posts.each do |post| %>
            <%= render "mypost", post: post %>
          <% end %>
        </div>
  
        <div id="draft" class="tab-pane fade">
          <% @draft_posts.each do |post| %>
            <%= render "mypost", post: post %>
          <% end %>
        </div>
  
        <div id="unpublished" class="tab-pane fade">
          <% @unpublished_posts.each do |post| %>
            <%= render "mypost", post: post %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

ポートフォリオのデザインがんがん編集中です！
納期が迫ってきているので焦る気持ちあるけど、この程よい緊張感が大好きです笑
前職もこの緊張感と常に戦っていました。いつも乗り越えてきたので今回も絶対に大丈夫！

あとzennの投稿機能少し変わったね！慣れてないけど更新後のほうが使いやすい！
アイキャッチ絵文字はいつもちゃんとイメージに合うものを選んでいます笑

Discussion