タブ

ローカルコンテンツのタブ付きペインのウィジェットを作成します。タブコンポーネントは、内部的にナビゲーションとカードに基づいて構築されており、タブの完全なキーボードナビゲーション制御を提供します。

ナビゲーションベースのタブ（つまり、URLを変更するタブ）の場合は、代わりに<b-nav>コンポーネントを使用してください。

基本的な使用法

<div>
  <b-tabs content-class="mt-3">
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs.vue -->

ヒント: 子の <b-tab> コンポーネントを動的に追加または削除する場合（つまり、v-if または for ループ）、各 <b-tab> コンポーネントに一意の key 値を指定する必要があります。 key 属性は特別な Vue 属性です。 https://vuejs.org/v2/api/#key を参照してください。

カードの統合

タブはBootstrapカードとの統合をサポートしています。 <b-tabs> に card プロパティを追加し、<b-card> コンポーネント内に配置するだけです。カードヘッダーを適切に装飾し、card-body によって導入された余分なパディングを削除するために、<b-card> コンポーネントにno-body プロップを追加する必要があることに注意してください。

<div>
  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1" active>
        <b-card-text>Tab contents 1</b-card-text>
      </b-tab>
      <b-tab title="Tab 2">
        <b-card-text>Tab contents 2</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-card.vue -->

<b-tabs> が card モードの場合、各 <b-tab> サブコンポーネントには、自動的に card-body クラスが適用されます（このクラスはタブコンテンツの周りにパディングを提供します）。 card-body クラスを無効にするには、<b-tab> サブコンポーネントに no-body プロップを設定します。

<div>
  <b-card no-body>
    <b-tabs card>
      <b-tab no-body title="Picture 1">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21"></b-card-img>
        <b-card-footer>Picture 1 footer</b-card-footer>
      </b-tab>

      <b-tab no-body title="Picture 2">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25"></b-card-img>
        <b-card-footer>Picture 2 footer</b-card-footer>
      </b-tab>

      <b-tab no-body title="Picture 3">
        <b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26"></b-card-img>
        <b-card-footer>Picture 3 footer</b-card-footer>
      </b-tab>

      <b-tab title="Text">
        <b-card-title>This tab does not have the <code>no-body</code> prop set</b-card-title>
        <b-card-text>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
          consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex
          consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
          veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua
          esse irure.
        </b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-card-no-body.vue -->

注: <b-tab> で no-body プロップを設定しても、<b-tabs> が card モードでない場合は影響はありません（card-body クラスはcard モードの場合にのみ設定されるため）。

カードコンポーネントの詳細については、カードのドキュメントを参照してください。

ピルバリアント

タブは、デフォルトで tabs スタイルを使用します。ピルスタイルのバリアントについては、<b-tabs> に pills プロパティを追加するだけです。

<div>
  <b-card no-body>
    <b-tabs pills card>
      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-pills.vue -->

塗りつぶしと均等配置

<b-tabs> コントロールを強制的に使用可能な幅全体に拡張します。

塗りつぶし

タブコントロールで使用可能なすべてのスペースを比例的に塗りつぶすには、fill プロップを設定します。すべての水平スペースが占有されますが、すべてのコントロールが同じ幅であるわけではないことに注意してください。

<div>
  <b-tabs content-class="mt-3" fill>
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Very, very long title"><p>I'm the tab with the very, very long title</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-fill.vue -->

均等配置

均等幅のコントロールについては、代わりに justified プロップを使用します。すべての水平スペースはコントロールによって占有されますが、上記の fill の使用とは異なり、すべてのコントロールが同じ幅になります。

<div>
  <b-tabs content-class="mt-3" justified>
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Very, very long title"><p>I'm the tab with the very, very long title</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-justified.vue -->

配置

タブコントロールを配置するには、align プロップを使用します。使用可能な値は、left、center および right です。

<div>
  <b-tabs content-class="mt-3" align="center">
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-alignment.vue -->

タブコントロールの下部配置

プロップ end を設定して、タブコントロールを視覚的に下部に移動します。

<div>
  <b-card no-body>
    <b-tabs pills card end>
      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-bottom.vue -->

注意点

下部配置は、pills バリアントで視覚的に最適に機能します。デフォルトの tabs バリアントを使用する場合は、Bootstrap v4 CSS はタブが常にタブコンテンツの上部に配置されることを前提としているため、独自のカスタムスタイリングクラスを提供することをお勧めします。
下部に配置されたコントロールでより優れたユーザーエクスペリエンスを提供するには、各タブペインの内容が同じ高さであり、表示可能なビューポート内に完全に収まるようにしてください。そうしないと、ユーザーはタブ付きコンテンツの先頭を読むためにスクロールアップする必要が生じます。

垂直タブ

vertical プロップを true に設定して、タブコントロールを左側に配置します。垂直タブは、card モードが有効かどうかに関係なく機能します。

<div>
  <b-card no-body>
    <b-tabs pills card vertical>
      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical.vue -->

end プロップを設定して、タブコントロールを視覚的に右側に移動します

<div>
  <b-card no-body>
    <b-tabs pills card vertical end>
      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical-end.vue -->

垂直タブコントロールの幅は、タブタイトルの幅に合わせて拡張されます。幅を制御するには、幅ユーティリティクラスをプロップ nav-wrapper-class を介して設定します。 w-25（幅25％）、w-50（幅50％）などの値、または col-2、col-3 などの列クラスを使用できます。

<div>
  <b-card no-body>
    <b-tabs pills card vertical nav-wrapper-class="w-50">
      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
    </b-tabs>
  </b-card>
</div>

<!-- b-tabs-vertical-width.vue -->

垂直配置は、pills バリアントで視覚的に最適に機能します。デフォルトの tabs バリアントを使用する場合は、Bootstrap v4 CSS はタブコントロールが常にタブコンテンツの上部に配置されることを前提としているため、独自のカスタムスタイリングクラスを提供することをお勧めします。

注: 幅がタブタイトルよりも狭い場合、テキストがオーバーフローする可能性があります。追加のカスタムスタイリングが必要になる場合があります。

アクティブクラス

現在アクティブなコントロールまたはタブにクラスを適用するには、active-nav-item-class および active-tab-class プロップを使用します。

<div>
  <b-tabs
    active-nav-item-class="font-weight-bold text-uppercase text-danger"
    active-tab-class="font-weight-bold text-success"
    content-class="mt-3"
  >
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
  </b-tabs>
</div>

<!-- b-tabs-classes.vue -->

フェードアニメーション

タブを変更すると、フェードがデフォルトで有効になります。 no-fade プロパティで無効にできます。

コンテンツなしでタブを追加する

コンテンツのない追加のタブを追加する場合は、tabs-start または tabs-end スロットに入れることができます。

<div>
  <b-tabs>
    <!-- Add your b-tab components here -->
    <template #tabs-end>
      <b-nav-item href="#" role="presentation" @click="() => {}">Another tab</b-nav-item>
      <li role="presentation" class="nav-item align-self-center">Plain text</li>
    </template>
  </b-tabs>
</div>

<!-- b-tabs-item-slot.vue -->

コンテンツタブボタンの前に追加のタブボタンを配置するには tabs-start スロットを使用し、コンテンツタブボタンの後に追加のタブボタンを配置するには tabs-end スロットを使用します。

注: 追加の（コンテンツのない）タブボタンは、適切なレンダリングとセマンティックマークアップのために、<b-nav-item> であるか、または <li> のルート要素とクラス nav-item を持つ必要があります。

タブタイトルにカスタムコンテンツを追加する

HTMLコード、アイコン、または別の非対話型Vueコンポーネントなど、タブタイトルにカスタムコンテンツを追加する場合は、<b-tab> の title スロットを使用することで可能です。

<div>
  <b-tabs>
    <b-tab active>
      <template #title>
        <b-spinner type="grow" small></b-spinner> I'm <i>custom</i> <strong>title</strong>
      </template>
      <p class="p-3">Tab contents 1</p>
    </b-tab>

    <b-tab>
      <template #title>
        <b-spinner type="border" small></b-spinner> Tab 2
      </template>
      <p class="p-3">Tab contents 2</p>
    </b-tab>
  </b-tabs>
</div>

<!-- b-tabs-title-slot.vue -->

タイトルスロット内に対話型要素/コンポーネントを配置しないでください。タブボタンは、HTML5仕様に従って、子対話型要素をサポートしないリンクです。

生成されたnav-tabsまたはpillsにカスタムクラスを適用する

タブセレクターは、Bootstrap v4 の nav マークアップ（つまり、ul.nav > li.nav-item > a.nav-link）に基づいています。状況によっては、タブごとに <li> (nav-item) および/または <a> (nav-link) にクラスを追加したい場合があります。これを行うには、クラス名を title-item-class プロップ（<li> 要素用）または title-link-class プロップ（<a> 要素用）に指定するだけです。値は、文字列または文字列の配列として渡すことができます。

注: active クラスは、アクティブなタブの <a> 要素に自動的に適用されます。これに合わせてカスタムクラスを調整する必要がある場合があります。

<template>
  <div>
    <b-card no-body>
      <b-tabs v-model="tabIndex" card>
        <b-tab title="Tab 1" :title-link-class="linkClass(0)">Tab contents 1</b-tab>
        <b-tab title="Tab 2" :title-link-class="linkClass(1)">Tab contents 2</b-tab>
        <b-tab title="Tab 3" :title-link-class="linkClass(2)">Tab contents 3</b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 0
      }
    },
    methods: {
      linkClass(idx) {
        if (this.tabIndex === idx) {
          return ['bg-primary', 'text-light']
        } else {
          return ['bg-light', 'text-info']
        }
      }
    }
  }
</script>

<!-- b-tabs-with-classes.vue -->

タブコンテンツの遅延読み込み

場合によっては、<b-tabs> セットをレンダリングするときに、すべてのタブ（および関連データ）をロードする代わりに、タブをアクティブ化するときにのみコンポーネントとデータをロードすることが推奨されます。

個々の <b-tab> コンポーネントは、lazy プロップを介して遅延ロードできます。このプロップが設定されている場合、<b-tab> のコンテンツはアクティブ化（表示）されるまでマウントされず、タブが非アクティブ化（非表示）されるとマウント解除されます。

<b-tabs content-class="mt-3">
  <!-- This tabs content will always be mounted -->
  <b-tab title="Regular tab"><b-alert show>I'm always mounted</b-alert></b-tab>

  <!-- This tabs content will not be mounted until the tab is shown -->
  <!-- and will be un-mounted when hidden -->
  <b-tab title="Lazy tab" lazy><b-alert show>I'm lazy mounted!</b-alert></b-tab>
</b-tabs>

<!-- b-tabs-lazy-tab.vue -->

また、親の <b-tabs> コンポーネントに lazy プロップを設定することにより、すべてのタブを遅延にすることもできます。

<b-tabs content-class="mt-3" lazy>
  <b-tab title="Tab 1"><b-alert show>I'm lazy mounted!</b-alert></b-tab>
  <b-tab title="Tab 2"><b-alert show>I'm lazy mounted too!</b-alert></b-tab>
</b-tabs>

<!-- b-tabs-lazy.vue -->

タブボタンにフォーカスがある場合、tablistとのARIAコンプライアンスのために、キーボードナビゲーションがデフォルトで有効になっています。

キー押下	アクション
`左` または `上`	前の無効になっていないタブをアクティブ化する
`右` または `下`	次の無効になっていないタブをアクティブ化する
`Shift`+`左` または `Shift`+`上`	最初の無効になっていないタブをアクティブ化する
`ホーム`	最初の無効になっていないタブをアクティブ化する
`Shift`+`右` または `Shift`+`下`	最後に有効になっているタブをアクティブにする
`End`	最後に有効になっているタブをアクティブにする
`Tab`	アクティブなタブコンテンツにフォーカスを移動する
`Shift`+`Tab`	ページ上の前のコントロールにフォーカスを移動する

no-key-nav プロパティを設定して、キーボードナビゲーションを無効にします。動作は、TABキーによる通常のブラウザナビゲーションに戻ります。

キー押下	アクション
`Tab`	ページ上の次のタブボタンまたはコントロールに移動する
`Shift`+`Tab`	ページ上の前のタブボタンまたはコントロールに移動する
`Enter` または `Space`	現在フォーカスされているボタンのタブをアクティブにする

プログラムによるタブのアクティブ化と非アクティブ化

<b-tabs> の v-model を使用して、表示するタブのインデックス（0から始まる）を v-model に設定することにより、アクティブなタブを制御します（以下の例を参照）。

または、各 <b-tab> の active プロパティを .sync 修飾子と共に使用して、タブをアクティブにするか、特定のタブがアクティブかどうかを検出できます。

各 <b-tab> インスタンスには、タブをアクティブ化または非アクティブ化するための2つのパブリックメソッドも用意されています。メソッドは、それぞれ .activate() と .deactivate() です。アクティブ化または非アクティブ化が失敗した場合（つまり、タブが無効になっているか、アクティブ化を移動できるタブがない場合）、現在アクティブなタブはアクティブのままになり、メソッドは false を返します。これらのメソッドを使用するには、<b-tab> への参照が必要です。

`<b-tab>` のアクティブ化を防止する

タブのアクティブ化を防止するには、<b-tab> コンポーネントの disabled プロパティを設定するだけです。

または、activate-tab イベントをリッスンできます。このイベントには、タブのアクティブ化を防止するオプションが用意されています。activate-tab イベントは、3つの引数で発行されます。

newTabIndex：アクティブ化されるタブのインデックス
prevTabIndex：現在アクティブなタブのインデックス
bvEvent：BvEvent オブジェクト。newTabIndex がアクティブ化されないようにするには、bvEvent.preventDefault() を呼び出します

アクセシビリティ上の理由から、activate-tab イベントを使用してタブのアクティブ化を防止する場合は、タブをアクティブ化できない理由をユーザーに通知する手段を提供する必要があります。activate-tab イベントを使用する代わりに、<b-tab> コンポーネントで disabled 属性を使用することをお勧めします（disabled はスクリーンリーダーのユーザーにとってより直感的であるため）。

高度な例

`v-model` を使用した外部コントロール

<template>
  <div>
    <!-- Tabs with card integration -->
    <b-card no-body>
      <b-tabs v-model="tabIndex" small card>
        <b-tab title="General">I'm the first fading tab</b-tab>
        <b-tab title="Edit profile">
          I'm the second tab
          <b-card>I'm the card in tab</b-card>
        </b-tab>
        <b-tab title="Premium Plan" disabled>Sibzamini!</b-tab>
        <b-tab title="Info">I'm the last tab</b-tab>
      </b-tabs>
    </b-card>

    <!-- Control buttons-->
    <div class="text-center">
      <b-button-group class="mt-2">
        <b-button @click="tabIndex--">Previous</b-button>
        <b-button @click="tabIndex++">Next</b-button>
      </b-button-group>

      <div class="text-muted">Current Tab: {{ tabIndex }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 1
      }
    }
  }
</script>

<!-- b-tabs-controls.vue -->

動的タブ + tabs-end スロット

<template>
  <div>
    <b-card no-body>
      <b-tabs card>
        <!-- Render Tabs, supply a unique `key` to each tab -->
        <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
          Tab contents {{ i }}
          <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
            Close tab
          </b-button>
        </b-tab>

        <!-- New Tab Button (Using tabs-end slot) -->
        <template #tabs-end>
          <b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
        </template>

        <!-- Render this if no tabs -->
        <template #empty>
          <div class="text-center text-muted">
            There are no open tabs<br>
            Open a new tab using the <b>+</b> button above.
          </div>
        </template>
      </b-tabs>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [],
        tabCounter: 0
      }
    },
    methods: {
      closeTab(x) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i] === x) {
            this.tabs.splice(i, 1)
          }
        }
      },
      newTab() {
        this.tabs.push(this.tabCounter++)
      }
    }
  }
</script>

<!-- b-tabs-dynamic.vue -->

コンポーネントリファレンス

`<b-tabs>`

ソースを表示

<b-tabs> プロパティ
<b-tabs> v-model
<b-tabs> スロット
<b-tabs> イベント

プロパティ

すべてのプロパティのデフォルト値は、グローバルに構成可能です。

プロパティ（昇順でソートするにはクリック）	型（昇順でソートするにはクリック）	デフォルト	説明
`active-nav-item-class`	`Array` または `Object` または `String`		アクティブなナビゲーションアイテムのタブコントロールに適用するCSSクラス（またはクラス）
`active-tab-class`	`Array` または `Object` または `String`		現在アクティブなタブに適用するCSSクラス（またはクラス）
`align`	`String`		ナビゲーション内のナビゲーションアイテムを配置します：'start'（または 'left'）、'center'、'end'（または 'right'）
`card`	`Boolean`	`false`	trueに設定すると、'b-card'に配置するのに適切なスタイルでタブをレンダリングします
`content-class`	`Array` または `Object` または `String`		tab-contentラッパーに適用するCSSクラス（またはクラス）
`end`	`Boolean`	`false`	タブコントロールを下部（水平タブ）または右（垂直タブ）に配置します
`fill`	`Boolean`	`false`	ナビゲーションアイテムで水平方向のすべてのスペースを比例的に埋めます。水平方向のすべてのスペースが占有されますが、すべてのナビゲーションアイテムの幅が同じとは限りません
`id`	`String`		レンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます
`justified`	`Boolean`	`false`	ナビゲーションアイテムですべての水平スペースを埋めますが、'fill'とは異なり、すべてのナビゲーションアイテムの幅が同じになります
`lazy`	`Boolean`	`false`	表示時にb-tabコンテンツを遅延レンダリングします
`nav-class`	`Array` または `Object` または `String`		タブリスト（nav）ラッパーに適用するCSSクラス（またはクラス）
`nav-wrapper-class`	`Array` または `Object` または `String`		タブコントロールラッパー要素に適用するCSSクラス（またはクラス）
`no-fade`	`Boolean`	`false`	`true`に設定すると、コンポーネントのフェードアニメーション/トランジションを無効にします
`no-key-nav`	`Boolean`	`false`	タブコントロールのキーボードナビゲーションを無効にします
`no-nav-style`	`Boolean`	`false`	タブスタイリングでタブコントロールをレンダリングしません
`pills`	`Boolean`	`false`	ピルボタンの外観でナビゲーションアイテムをレンダリングします
`small`	`Boolean`	`false`	ナビゲーションを小さくします
`tag`	`String`	`'div'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します
`value` v-model	`Number`		現在表示されているタブインデックス（0から始まる）
`vertical`	`Boolean`	`false`	タブコントロールを垂直にレンダリングします

`v-model`

プロパティ	イベント
`value`	`input`

スロット

名前	説明
`default`	タブ要素に配置するコンテンツ（タブ）
`empty`	タブがない場合にこのスロットをレンダリングします
`tabs-end`	コンテンツタブボタンの後に配置されるタブコンテンツのない追加のタブボタン
`tabs-start`	コンテンツタブボタンの前に配置されるタブコンテンツのない追加のタブボタン

イベント

イベント	引数	説明
`activate-tab` v2.1.0+	`newTabIndex` - アクティブ化されるタブ（0から始まるインデックス） `prevTabIndex` - 現在アクティブなタブ（0から始まるインデックス）。現在アクティブなタブがない場合は -1 になります `bvEvent` - BvEventオブジェクト。キャンセルするにはbvEvent.preventDefault()を呼び出します	タブが表示/アクティブ化される直前に発行されます。キャンセル可能
`changed`	`currentTabs` - ドキュメント順に並んだ現在のb-tabインスタンスの配列 `previousTabs` - ドキュメント順に並んだ以前のb-tabインスタンスの配列	タブが追加、削除された場合、またはタブが並べ替えられた場合に発行されます
`input`	`tabIndex` - 現在選択されているタブインデックス（0から始まるインデックス）	タブが表示されたときに発行されます。v-modelを更新するために使用されます

`<b-tab>`

ソースを表示

<b-tab> プロパティ
<b-tab> スロット
<b-tab> イベント

プロパティ

すべてのプロパティのデフォルト値は、グローバルに構成可能です。

プロパティ（昇順でソートするにはクリック）	型（昇順でソートするにはクリック）	デフォルト	説明
`active`	`Boolean`	`false`	`true`に設定すると、コンポーネントをアクティブなスタイルでアクティブ状態にします
`button-id`	`String`		このタブのタブコントロールボタンに特定のIDを使用します。指定しない場合は、自動的に生成されます
`disabled`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能を無効にし、無効状態にします
`id`	`String`		レンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます
`lazy`	`Boolean`	`false`	表示時にこのタブのコンテンツを遅延レンダリングします
`no-body`	`Boolean`	`false`	親のb-tabsに 'card' プロパティが設定されている場合、card-bodyラッパーをレンダリングしません
`tag`	`String`	`'div'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します
`title`	`String`		タイトルに配置するテキストコンテンツ
`title-item-class`	`Array` または `Object` または `String`		タブのコントロールボタン 'li' 要素に適用するCSSクラス（またはクラス）
`title-link-attributes` v2.6.0+	`Object`		タブのコントロールボタンの内部リンク要素に適用する属性
`title-link-class`	`Array` または `Object` または `String`		タブのコントロールボタンの内部リンク要素に適用するCSSクラス（またはクラス）

スロット

名前	説明
`title`	カスタムタブタイトルのスロット

イベント

イベント	引数	説明
`click`	`event` - 元のイベントオブジェクト	タブがクリックされたとき、またはキーボードナビゲーションによってアクティブ化されたときに発行されます

個々のコンポーネントのインポート

次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます

コンポーネント	名前付きエクスポート	インポートパス
`<b-tabs>`	`BTabs`	`bootstrap-vue`
`<b-tab>`	`BTab`	`bootstrap-vue`

例

import { BTabs } from 'bootstrap-vue'
Vue.component('b-tabs', BTabs)

Vue.jsプラグインとしてインポートする

このプラグインには、上記の個々のコンポーネントがすべて含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート	インポートパス
`TabsPlugin`	`bootstrap-vue`

例

import { TabsPlugin } from 'bootstrap-vue'
Vue.use(TabsPlugin)

基本的な使用法

カードの統合

ピルバリアント

塗りつぶしと均等配置

塗りつぶし

均等配置

配置

タブコントロールの下部配置

垂直タブ

アクティブクラス

フェードアニメーション

コンテンツなしでタブを追加する

タブタイトルにカスタムコンテンツを追加する

生成されたnav-tabsまたはpillsにカスタムクラスを適用する

タブコンテンツの遅延読み込み

キーボードナビゲーション

プログラムによるタブのアクティブ化と非アクティブ化

<b-tab> のアクティブ化を防止する

高度な例

v-model を使用した外部コントロール

動的タブ + tabs-end スロット

コンポーネントリファレンス

プロパティ

v-model

スロット

イベント

プロパティ

スロット

イベント

個々のコンポーネントのインポート

Vue.jsプラグインとしてインポートする

`<b-tab>` のアクティブ化を防止する

`v-model` を使用した外部コントロール

`v-model`