パンくずリスト | コンポーネント

ナビゲーション階層内の現在のページの位置を示します。セパレーターは、CSSで::beforeとcontentを介して自動的に追加されます。

概要

<template>
  <b-breadcrumb :items="items"></b-breadcrumb>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: 'Admin',
            href: '#'
          },
          {
            text: 'Manage',
            href: '#'
          },
          {
            text: 'Library',
            active: true
          }
        ]
      }
    }
  }
</script>

<!-- b-breadcrumb.vue -->

項目は:itemsプロパティを使用してレンダリングされます。これは、リンクとアクティブ状態を提供するオブジェクトの配列にすることができます。リンクはアンカータグのhrefや、ルーターリンクのtoにすることができます。パンくずリストは、順序付けられたパンくずリストのすべてのセットに1つのアクティブなリンクがあることを前提としているため、最後の要素のアクティブ状態は自動的にfalseに設定されます。

const items = [
  {
    text: 'Home',
    href: 'https://google.com'
  },
  {
    text: 'Posts',
    to: { name: 'home' }
  },
  {
    text: 'Another Story',
    active: true
  }
]

ルーターリンク固有のプロパティについては、ルーターサポートのリファレンスページを参照してください。

手動で配置された項目

itemsプロパティを使用する代わりに、各項目のコンテンツをより細かく制御するために、<b-breadcrumb>コンポーネントのデフォルトスロットに個別の<b-breadcrumb-item>子コンポーネントを手動で配置することもできます。

<template>
  <b-breadcrumb>
    <b-breadcrumb-item href="#home">
      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
      Home
    </b-breadcrumb-item>
    <b-breadcrumb-item href="#foo">Foo</b-breadcrumb-item>
    <b-breadcrumb-item href="#bar">Bar</b-breadcrumb-item>
    <b-breadcrumb-item active>Baz</b-breadcrumb-item>
  </b-breadcrumb>
</template>

<!-- b-breadcrumb-item.vue -->

最後の項目にactiveプロパティを設定することを忘れないでください。

<b-breadcrumb-item>は、toなど、さまざまな<router-link>プロパティもサポートしています。

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

関数型コンポーネント

ソースを表示

<b-breadcrumb> プロパティ
<b-breadcrumb> スロット

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

プロパティ	型	デフォルト	説明
`items`	`配列`		レンダリングするパンくずリスト項目の配列

名前	説明
`デフォルト`	パンくずリストに配置するコンテンツ（パンくずリスト項目）

関数型コンポーネント

ソースを表示

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

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

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

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

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

名前	説明
`デフォルト`	パンくずリスト項目に配置するコンテンツ

イベント	引数	説明
`click`	`event` - ネイティブクリックイベントオブジェクト	クリック時に発行されます

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

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

コンポーネント	名前付きエクスポート	インポートパス
`<b-breadcrumb>`	`BBreadcrumb`	`bootstrap-vue`
`<b-breadcrumb-item>`	`BBreadcrumbItem`	`bootstrap-vue`

例

import { BBreadcrumb } from 'bootstrap-vue'
Vue.component('b-breadcrumb', BBreadcrumb)

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

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

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

例

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

概要

パンくずリスト項目

手動で配置された項目

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

プロパティ

スロット

プロパティ

スロット

イベント

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

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