問題を報告このページを編集

ナビ

Bootstrapで利用可能なナビゲーションは、ベースとなる<b-nav>クラスからactiveおよびdisabled状態まで、一般的なマークアップとスタイルを共有します。モディファイアープロパティを切り替えて、各スタイルを切り替えます。

<div>
  <b-nav>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav.vue -->

概要

ベースの<b-nav>コンポーネントはflexboxで構築されており、あらゆるタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供します。（リストを操作するための）いくつかのスタイルのオーバーライド、より大きなヒットエリアのためのいくつかのリンクパディング、および基本的な無効化スタイルが含まれています。ベースナビにはアクティブ状態は含まれていません。

<b-nav>は、以下の子コンポーネントをサポートしています。

  • アクション可能なリンク（またはrouter-links）用の<b-nav-item>
  • ドロップダウン用の<b-nav-item-dropdown>
  • プレーンテキストコンテンツ用の<b-nav-text>
  • インラインフォーム用の<b-nav-form>

tabsとpillsの2つのスタイルバリエーションがサポートされており、active状態のスタイルをサポートしています。これらのバリアントは相互に排他的です。いずれか一方のスタイルのみを使用してください。

タブスタイル

tabsプロパティを設定して、ナビをタブのように見せます。

<div>
  <b-nav tabs>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

ピルスタイル

pillsプロパティを設定してピルスタイルを使用します。

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

小

smallプロパティを設定してナビを小さくします。

<div>
  <b-nav small>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

<!-- b-nav-small.vue -->

塗りつぶしと均等配置

<b-nav>コンテンツを強制的に利用可能な幅全体に拡張します。

塗りつぶし

利用可能なすべてのスペースを<b-nav-item>コンポーネントで均等に埋めるには、fillプロパティを設定します。すべての水平スペースが占有されていますが、すべてのナビ項目が同じ幅であるとは限りません。

<div>
  <b-nav tabs fill>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

均等配置

均等幅の要素の場合は、代わりにjustifiedプロパティを設定します。すべての水平スペースはナビリンクで占有されますが、上記のfillとは異なり、すべての<b-nav-item>は同じ幅になります。

<div>
  <b-nav tabs justified>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

配置

<b-nav-item>コンポーネントを配置するには、alignプロパティを使用します。使用可能な値は、left、center、およびrightです。

<div>
  <b-nav tabs align="center">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Link with a long name </b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

垂直バリエーション

デフォルトでは、<b-nav>は水平線上に表示されます。verticalプロパティを設定して、ナビゲーションを積み重ねます。

<div>
  <b-nav vertical class="w-25">
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>

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

ナビゲーション内にドロップダウンアイテムを配置するには、<b-nav-item-dropdown>を使用します。

<div>
  <b-nav pills>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item-dropdown
      id="my-nav-dropdown"
      text="Dropdown"
      toggle-class="nav-link-custom"
      right
    >
      <b-dropdown-item>One</b-dropdown-item>
      <b-dropdown-item>Two</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Three</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-nav>
</div>

<!-- b-nav-item-dropdown.vue -->

場合によっては、デフォルトでnav-linkとdropdown-toggleクラスを持つ生成されたドロップダウントグルボタンに独自のクラス名を追加したい場合があります。それらを追加するには（上記のように）toggle-classプロパティを使用します。これは次のようなHTMLをレンダリングします

<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
  <a
    role="button"
    href="#my-nav-dropdown"
    id="my-nav-dropdown__BV_button_"
    aria-haspopup="true"
    aria-expanded="false"
    class="nav-link dropdown-toggle nav-link-custom"
  ></a>
  ...
</li>

サポートされているサブコンポーネントのリストについては、<b-dropdown>を参照してください。

オプションでスコープされるデフォルトスロット

ドロップダウンのデフォルトスロットは、オプションで、以下のスコープで使用できます

プロパティまたはメソッド 説明
hide() ドロップダウンメニューを閉じるために使用できます。オプションのブール引数を受け入れます。この引数がtrueの場合、トグルボタンにフォーカスを返します

レイジードロップダウン

デフォルトでは、<b-nav-item-dropdown>は、メニューが表示されていない場合でも、DOMにメニューコンテンツをレンダリングします。同じページに多数のドロップダウンがレンダリングされると、メモリ使用量が全体的に大きくなるため、パフォーマンスに影響を与える可能性があります。lazyプロパティをtrueに設定することで、<b-nav-item-dropdown>にメニューコンテンツが表示されたときにのみレンダリングするように指示できます。

right、dropup、dropright、dropleft、no-flip、およびoffsetのドロップダウンプロパティを使用して、<b-nav-item-dropdown>の配置を制御します。

これらのプロパティの効果と使用法の詳細については、<b-dropdown>の配置セクションを参照してください。

トグルボタンは実際には、スタイリング目的でrole="button"が付いたリンク<a>タグとしてレンダリングされ、通常、hrefは、idプロパティを介してIDが提供されない限り、#に設定されることに注意してください。

トグルは、トグルリンクをクリックしたときに、スクロールトップトップの動作（JavaScript経由）を防止します。SSRを使用している場合、ユーザーがVueがコンポーネントをハイドレートする機会を得る前にトグルボタンをクリックすると、ページが上部にスクロールすることがあります。このような場合、idプロパティを介して一意のIDを提供するだけで、不要なトップへのスクロール動作を防止できます。

ナビテキストコンテンツ

ナビにプレーンテキストコンテンツを配置するには、<b-nav-text>子コンポーネントを使用します

<div>
  <b-nav >
    <b-nav-item href="#1">Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-text>Plain text</b-nav-text>
  </b-nav>
</div>

<!-- b-nav-text.vue -->

ナビにインラインフォームを配置するには、<b-nav-form>子コンポーネントを使用します

<div>
  <b-nav pills>
    <b-nav-item href="#1" active>Link 1</b-nav-item>
    <b-nav-item href="#2">Link 2</b-nav-item>
    <b-nav-form @submit.stop.prevent="alert('Form Submitted')">
      <b-form-input aria-label="Input" class="mr-1"></b-form-input>
      <b-button type="submit">Ok</b-button>
    </b-nav-form>
  </b-nav>
</div>

<!-- b-nav-form.vue -->

フォームコントロールの配置に関する詳細については、<b-form>インラインドキュメントを参照してください。

タブ付きローカルコンテンツのサポート

（ナビゲーションには適さない）ローカルコンテンツのタブ付きペインを作成するには、<b-tabs>コンポーネントを参照してください。

カードの統合

<b-card>ヘッダーで<b-nav>を使用するには、<b-nav>でcard-headerプロパティを有効にし、pillsまたはtabsプロパティのいずれかを設定します

タブスタイル

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

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

ピルスタイル

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header pills>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- nav-card-pills.vue -->

プレーンスタイル

card-headerプロパティは、tabsまたはpillsスタイルを適用する場合にのみ必要です。Bootstrap v4 SCSSには、active状態のプレーンスタイルナビ項目用の特別なスタイルがないことに注意してください。

<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- nav-card-plain.vue -->

card-headerプロパティは、<b-nav>がverticalモードの場合、スタイリング効果はありません。

Vue Routerでの使用

カード<b-nav>に<router-view>または<nuxt-child>コンポーネントを介してvueルーターのネストされたルートを制御させ、ルートURLで変更されるタブ付きコンテンツを作成します

// On page with route `/some/route`
<div>
  <b-card title="Card Title" no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <!-- <b-nav-item>'s with child routes. Note the trailing slash on the first <b-nav-item> -->
        <b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
        <b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
        <b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body>
      <!-- Child route gets rendered in <router-view> or <nuxt-child> -->
      <router-view></router-view>
      <!-- Or if using Nuxt.js
      <nuxt-child></nuxt-child>
      -->
    </b-card-body>
  </b-card>
</div>

注意：Vue Routerはハッシュ（#）を使用したアクティブなルートの定義をサポートしていません。そのため、「タブ」コンテンツを子ルートとして定義する必要があります。

上記のルーター構成例

const routes = [
  {
    path: '/some/route',
    // We don't provide a name on this parent route, but rather
    // set the name on the default child route instead
    // name: 'some-route',
    component: SomeRouteComponent,
    // Child route "tabs"
    children: [
      // Note we provide the above parent route name on the default child tab
      // route to ensure this tab is rendered by default when using named routes
      { path: '', component: DefaultTabComponent, name: 'some-route' },
      { path: 'foo', component: FooTabComponent },
      { path: 'bar', component: BarTabComponent }
    ]
  }
]

パスベースのルートの代わりに、Vue Routerの名前付きルートおよび/またはルートパラメーターを使用することもできます。

詳細については、以下を参照してください。

アクセシビリティ

<b-nav>を使用してナビゲーションバーを提供する場合は、<b-nav>の最も論理的な親コンテナーにrole="navigation"を追加するか、<b-nav>の周りに<nav>要素をラップしてください。支援技術によって実際のリストとしてアナウンスされるのを防ぐため、<b-nav>自体にロールを追加しないでください。

<b-nav>で<b-nav-item-dropdown>を使用する場合は、適切なaria-*属性が自動的に生成されるように、<b-nav-item-dropdown>に一意のidプロパティ値を必ず割り当ててください。

タブ付きインターフェイスのアクセシビリティ

ナビゲーションバーは、視覚的にタブとしてスタイルされている場合でも、role="tablist"、role="tab"、またはrole="tabpanel"属性を与えるべきではありません。これらは、タブ付きインターフェース（URLや$routeを変更しないもの）にのみ適切であり、WAI ARIA オーサリングプラクティスで説明されています。WAI ARIA に準拠した動的なタブ付きインターフェースについては、<b-tabs>を参照してください。

タブ付きインターフェースでは、ドロップダウンメニューの使用を避けるべきです。これはユーザビリティとアクセシビリティの両方の問題を引き起こすためです。

  • ユーザビリティの観点からは、現在表示されているタブのトリガー要素がすぐには見えない（閉じたドロップダウンメニュー内にあるため）という事実が混乱を招く可能性があります。
  • アクセシビリティの観点からは、この種の構造を標準的な WAI ARIA パターンにマッピングする適切な方法が現在ないため、支援技術のユーザーにとって理解しやすくすることが困難です。

関連情報

  • <b-tabs> を使用すると、ドロップダウンメニュー経由でもローカルコンテンツのタブ付きペインを作成できます。
  • <b-navbar> は、ブランディング、ナビゲーション、その他の要素を簡潔なヘッダーに配置するためのラッパーです。
  • <b-nav-item-dropdown> 内に配置できるサブコンポーネントについては、<b-dropdown> を参照してください。
  • <b-nav-item> で利用可能なルーターリンク固有のプロパティに関する情報については、ルーターリンクのサポートリファレンスを参照してください。

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

<b-nav>

関数型コンポーネント
ソースを表示

プロパティ

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

プロパティ
タイプ
デフォルト
説明
align
Stringナビゲーション内のナビゲーション項目の配置：'start'（または 'left'）、'center'、'end'（または 'right'）
card-header
v2.0.0+ 		Booleanfalseナビゲーションがカードヘッダー内に配置されている場合に、このプロパティを設定します
fill
Booleanfalseナビゲーション項目で水平方向のすべてのスペースを均等に埋めます。水平方向のすべてのスペースが占有されますが、すべてのナビゲーション項目の幅が同じになるわけではありません。
justified
Booleanfalseナビゲーション項目で水平方向のすべてのスペースを埋めますが、'fill' とは異なり、すべてのナビゲーション項目の幅は同じになります。
pills
Booleanfalseナビゲーション項目をピルボタンの外観でレンダリングします。
small
Booleanfalseナビゲーションを小さくします。
tabs
Booleanfalseナビゲーション項目をタブの外観でレンダリングします。
tag
String'ul'デフォルトのタグの代わりにレンダリングする HTML タグを指定します。
vertical
Booleanfalseナビゲーションを垂直にレンダリングします。

スロット

名前
説明
default ナビゲーションに配置するコンテンツ

<b-nav-item>

関数型コンポーネント
ソースを表示

プロパティ

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

プロパティ
(昇順でソートするにはクリック)
タイプ
(昇順でソートするにはクリック)
デフォルト
説明
active
Booleanfalse`true` に設定すると、コンポーネントをアクティブな状態にし、アクティブなスタイルを適用します。
active-class
String<router-link> プロパティ：リンクがアクティブなときに適用されるアクティブな CSS クラスを設定します。通常、これをクラス名 'active' に設定します。
append
Booleanfalse<router-link> プロパティ：append プロパティを設定すると、常に相対パスが現在のパスに追加されます。
disabled
Booleanfalse`true` に設定すると、コンポーネントの機能が無効になり、無効状態になります。
exact
Booleanfalse<router-link> プロパティ：デフォルトのアクティブクラスのマッチング動作はインクルーシブマッチです。このプロパティを設定すると、モードがルートと完全に一致するように強制されます。
exact-active-class
String<router-link> プロパティ：完全に一致するリンクがアクティブな場合に適用されるアクティブな CSS クラスを設定します。通常、これをクラス名 'active' に設定します。
exact-path
Booleanfalse<router-link> プロパティ：URL のパスセクションのみを使用して一致させ、クエリとハッシュセクションを事実上無視することができます。
exact-path-active-class
String<router-link> プロパティ：正確なパス一致でリンクがアクティブな場合に適用されるアクティブな CSS クラスを設定します。通常、これをクラス名 'active' に設定します。
href
String<b-link> プロパティ：標準的な a リンクのターゲット URL を示します。
link-attrs
Object{}ネストされたリンク要素に配置する追加の属性
link-classes
Array または Object または Stringネストされたリンク要素に配置する CSS クラス（またはクラス）。
no-prefetch
Booleanfalse<nuxt-link> プロパティ：Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`no-prefetch` を設定すると、特定のリンクに対してこの機能が無効になります。
prefetch
v2.15.0+ 		Booleannull<nuxt-link> プロパティ：Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`prefetch` を `true` または `false` に設定すると、`router.prefetchLinks` のデフォルト値が上書きされます。
rel
Stringnull<b-link> プロパティ：レンダリングされたリンクに `rel` 属性を設定します。
replace
Booleanfalse<router-link> プロパティ：replace プロパティを設定すると、クリック時に `router.push()` の代わりに `router.replace()` が呼び出されるため、ナビゲーションは履歴レコードを残しません。
router-component-name
v2.15.0+ 		String<b-link> プロパティ：BootstrapVue は `<router-link>` と `<nuxt-link>` を自動的に検出します。`<router-link>` に基づくサードパーティのリンクコンポーネントを使用する場合、このプロパティをコンポーネント名に設定します。たとえば、Gridsome を使用している場合は 'g-link' に設定します（`<router-link>` 固有のプロパティのみがコンポーネントに渡されることに注意してください）。
target
String'_self'<b-link> プロパティ：レンダリングされたリンクに `target` 属性を設定します。
to
Object または String<router-link> プロパティ：リンクのターゲットルートを示します。クリックすると、to プロパティの値が内部的に `router.push()` に渡されるため、値は文字列またはロケーション記述子オブジェクトのいずれかになります。

<b-nav-item> は、<router-link> または <nuxt-link> コンポーネント（Nuxt.js を使用している場合）の生成をサポートしています。ルーターリンク（または nuxt リンク）固有のプロパティの詳細については、ルーターサポートの参照セクションを参照してください。

スロット

名前
説明
default ナビゲーション項目に配置するコンテンツ

<b-nav-text>

関数型コンポーネント
ソースを表示

スロット

名前
説明
default ナビゲーションテキストに配置するコンテンツ

<b-nav-form>

関数型コンポーネント
ソースを表示

プロパティ

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

プロパティ
タイプ
デフォルト
説明
form-class
Array または Object または Stringフォームに追加する CSS クラス（またはクラス）
id
Stringレンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素 ID を生成するためのベースとして使用されます。
novalidate
Booleanfalse設定すると、フォーム内のコントロールに対するブラウザネイティブの HTML5 バリデーションが無効になります。
validated
Booleanfalse設定すると、フォームに Bootstrap クラス 'was-validated' が追加され、ネイティブブラウザのバリデーション状態がトリガーされます。

スロット

名前
説明
default ナビゲーションフォームに配置するコンテンツ

イベント

イベント
引数
説明
submit
  1. event - ネイティブな submit イベント
フォームが送信されるときに発生します。

<b-nav-item-dropdown>

ソースを表示

コンポーネントエイリアス

<b-nav-item-dropdown> は、次のエイリアスを使用して使用することもできます。

  • <b-nav-item-dd>
  • <b-nav-dropdown>
  • <b-nav-dd>

注：コンポーネントエイリアスは、BootstrapVue をすべてインポートするか、コンポーネントグループプラグインを使用する場合にのみ利用可能です。

プロパティ

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

プロパティ
(昇順でソートするにはクリック)
タイプ
(昇順でソートするにはクリック)
デフォルト
説明
boundary
v2.4.0+ 		HTMLElement または String'scrollParent'メニューの境界制約：'scrollParent'、'window'、'viewport'、または HTMLElement への参照。ドロップダウンが `<b-navbar>` 内にある場合は効果がありません。
disabled
Booleanfalse`true` に設定すると、コンポーネントの機能が無効になり、無効状態になります。
dropleft
Booleanfalse設定すると、メニューがボタンの左側に配置されます。
dropright
Booleanfalse設定すると、メニューがボタンの右側に配置されます。
dropup
Booleanfalse設定すると、メニューがボタンの上に配置されます。
html
注意して使用してください 		Stringトグル要素（リンク）に配置する HTML 文字列
id
Stringレンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素 ID を生成するためのベースとして使用されます。
lazy
Booleanfalse設定すると、メニューが開いている場合にのみ、メニューコンテンツが DOM にマウントされます。
menu-class
Array または Object または Stringメニューコンテナに追加する CSS クラス（またはクラス）
no-caret
Booleanfalseトグル要素（リンク）のキャレットインジケーターを非表示にします。
no-flip
Booleanfalseメニューが自動的に位置を反転するのを防ぎます。
offset
Number または String0
popper-opts
Object{}Popper.js に渡す追加の設定
right
Booleanfalseメニューの右端をボタンの右端に揃えます。
role
String'menu'ARIA 属性 `role` を特定の値に設定します。
text
Stringトグル要素（リンク）に配置するテキスト
toggle-class
Array または Object または Stringトグル要素（リンク）に追加するCSSクラス（または複数のクラス）

注意: HTML文字列をサポートするプロパティ（*-html）は、生のユーザー提供値を渡す際に、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります！

スロット

名前
スコープ付き
説明
button-content いいえアイコンやより多くのスタイリングを含むカスタムテキストを実装するために使用できます。
default ドロップダウンメニューコンテンツ用のオプションのスコープ付きデフォルトスロット

イベント

イベント
引数
説明
hidden ドロップダウンが非表示になったときに発生します
hide
  1. bvEvent - BvEventオブジェクト。非表示をキャンセルするにはbvEvent.preventDefault()を呼び出します
ドロップダウンが非表示になる直前に発生します。キャンセル可能です
show
  1. bvEvent - BvEventオブジェクト。表示をキャンセルするにはbvEvent.preventDefault()を呼び出します
ドロップダウンが表示される直前に発生します。キャンセル可能です
shown ドロップダウンが表示されたときに発生します
toggle トグルボタンがクリックされたときに発生します

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

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

コンポーネント
名前付きエクスポート
インポートパス
<b-nav>BNavbootstrap-vue
<b-nav-item>BNavItembootstrap-vue
<b-nav-text>BNavTextbootstrap-vue
<b-nav-form>BNavFormbootstrap-vue
<b-nav-item-dropdown>BNavItemDropdownbootstrap-vue

例

import { BNav } from 'bootstrap-vue'
Vue.component('b-nav', BNav)

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

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

名前付きエクスポート
インポートパス
NavPluginbootstrap-vue

このプラグインには、次のプラグインも自動的に含まれています

  • DropdownPlugin

例

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