タブ

同じ文脈のコンテンツや機能をひとまとめにするために利用します。

  • タブ実装の際には .tnav .mt-tabs の 2 クラスを記述してください。
  • アクセシビリティ配慮のためにタブには role="tablist"を追記してください。
  • タブコンテンツ .tab-pane には、role="tabpanel"を追記してください。
  • 本ドキュメンテーションでは JavaScript を使った操作は含まれていません。Bootstrap の tab.js を利用するか、別の手段で実装してください。
  • 選択中の情報にはタブリンク、コンテンツエリア共に .active が追記されます。
  • 情報又は機能でグループ分けできない場合はタブを使用しないようにしてください。単にスペースを節約するためだけに使う場合は、分類する方法はないか考慮した上で実装してください。

基本形

1
2
3
<ul class="nav mt-tabs" id="myTab" role="tablist">
  <li class="nav-item"><a class="nav-link active" href="#tabContent1">アクティブ</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabContent2">リンク</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabContent3">リンク</a></li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" role="tabpanel" id="tabContent1" aria-labelledby="myTabContent-tab">1</div>
  <div class="tab-pane" role="tabpanel" id="tabContent2" aria-labelledby="tabContent2-tab">2</div>
  <div class="tab-pane" role="tabpanel" id="tabContent3" aria-labelledby="tabContent3-tab">3</div>
</div>