タブ

パネルやコンテンツセクションのタブナビゲーション。

基本的な使い方

タブ 1タブ 2タブ 3無効

<div class="kit-tabbar">
  <a class="kit-tab -active" href="#">タブ 1</a>
  <a class="kit-tab" href="#">タブ 2</a>
  <a class="kit-tab" href="#">タブ 3</a>
  <a class="kit-tab -disabled" href="#">無効</a>
</div>

垂直タブ

ファイル検索拡張機能

<div class="kit-tabbar -vertical">
  <a class="kit-tab -active" href="#">ファイル</a>
  <a class="kit-tab" href="#">検索</a>
  <a class="kit-tab" href="#">拡張機能</a>
</div>

フラット

タブ 1タブ 2

<div class="kit-tabbar -flat">
  <a class="kit-tab -active" href="#">タブ 1</a>
  <a class="kit-tab" href="#">タブ 2</a>
</div>

コンパクト

タブ 1タブ 2タブ 3

<div class="kit-tabbar -compact">
  <a class="kit-tab -active" href="#">タブ 1</a>
  <a class="kit-tab" href="#">タブ 2</a>
  <a class="kit-tab" href="#">タブ 3</a>
</div>

セマンティックカラー

PrimarySuccessDanger

<div class="kit-tabbar">
  <a class="kit-tab -primary -active" href="#">Primary</a>
  <a class="kit-tab -success -active" href="#">Success</a>
  <a class="kit-tab -danger -active" href="#">Danger</a>
</div>