-
タブをリストとして実装する方法: HTMLのマークアップで、サイドバーのリスト要素を作成し、各リストアイテムをタブとしてスタイリングします。以下は、サンプルコードの一部です。
<div class="sidebar"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab1">タブ1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab2">タブ2</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab3">タブ3</a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade show active" id="tab1"> <!-- タブ1のコンテンツ --> </div> <div class="tab-pane fade" id="tab2"> <!-- タブ2のコンテンツ --> </div> <div class="tab-pane fade" id="tab3"> <!-- タブ3のコンテンツ --> </div> </div>上記の例では、
navクラスとflex-columnクラスを使用してリストを垂直に表示し、nav-itemクラスとnav-linkクラスを使用して各タブをスタイリングしています。data-bs-toggle属性とhref属性を使用して、各タブが対応するコンテンツを表示するように設定しています。 -
Bootstrapのタブコンポーネントを使用する方法: Bootstrapには、タブを簡単に作成するための機能が組み込まれています。以下は、サイドバーのタブを作成するためのサンプルコードの一部です。
<div class="sidebar"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-tab1" data-bs-toggle="pill" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">タブ1</a> <a class="nav-link" id="v-pills-tab2" data-bs-toggle="pill" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">タブ2</a> <a class="nav-link" id="v-pills-tab3" data-bs-toggle="pill" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">タブ3</a> </div> </div> <div class="tab-content"> <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="v-pills-tab1"> <!-- タブ1のコンテンツ --> </div> <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="v-pills-tab2"> <!-- タブ2のコンテンツ --> </div> <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="v-pills-tab3"> <!-- タブ3のコンテンツ --> </div> </div>この例では、
nav-pillsクラスを使用してタブのスタイルを設定し、data-bs-toggle属性を使用してタブが切り替わるようにしています。
これらの方法を使用すると、Bootstrap 5を使用して垂直なサイドバーのタブを実装することができます。上記のコード例を参考にして、自分のプロジェクトに適した方法を選んでください。また、適切なCSSスタイルを追加して、見た目をカスタマイズすることもできます。