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

バッジ

ほぼすべてのコンテンツにコンテキストを追加するための、小さくて適応性のあるタグ。

概要

バッジは、相対的なフォントサイズとem単位を使用することで、直近の親要素のサイズに合わせて拡大縮小します。

<div>
  <h2>Example heading <b-badge>New</b-badge></h2>
  <h3>Example heading <b-badge>New</b-badge></h3>
  <h4>Example heading <b-badge>New</b-badge></h4>
  <h5>Example heading <b-badge>New</b-badge></h5>
  <h6>Example heading <b-badge>New</b-badge></h6>
</div>

<!-- b-badges.vue -->

バッジは、リンクまたはボタンの一部として使用して、カウンター（または同様のフラグ）を提供できます。

<div class="text-center">
  <b-button variant="primary">
    Notifications <b-badge variant="light">4</b-badge>
  </b-button>
</div>

<!-- b-badge-button.vue -->

バッジの用途によっては、スクリーンリーダーや同様の支援技術のユーザーにとって混乱を招く可能性があることに注意してください。バッジのスタイルによって、その目的が視覚的に示されますが、これらのユーザーには単にバッジの内容が表示されるだけです。状況によっては、これらのバッジは、文、リンク、またはボタンの末尾にあるランダムな追加の単語または数字のように見える場合があります。

（「通知」の例のように、「4」が通知の数であることが理解されている）コンテキストが明確でない場合は、視覚的に隠された追加のテキストで追加のコンテキストを含めることを検討してください。

<div class="text-center">
  <b-button variant="primary">
    Profile
    <b-badge variant="light">9 <span class="sr-only">unread messages</span></b-badge>
  </b-button>
</div>

<!-- b-badge-button-aria.vue -->

コンテキストに応じたバリエーション

<b-badge>の外観を変更するには、variantプロパティを使用して、次のいずれかのバリアントを追加します：default、primary、success、warning、info、およびdanger。バリアントが指定されていない場合は、defaultが使用されます。

<div>
  <b-badge variant="primary">Primary</b-badge>
  <b-badge variant="secondary">Secondary</b-badge>
  <b-badge variant="success">Success</b-badge>
  <b-badge variant="danger">Danger</b-badge>
  <b-badge variant="warning">Warning</b-badge>
  <b-badge variant="info">Info</b-badge>
  <b-badge variant="light">Light</b-badge>
  <b-badge variant="dark">Dark</b-badge>
</div>

<!-- b-badge-variants.vue -->

支援技術への意味の伝達

色を使用して意味を追加すると、視覚的な表示のみが提供されます。これは、スクリーンリーダーなどの支援技術のユーザーには伝達されません。色で示される情報が、（表示されているテキストなど）コンテンツ自体から明らかな場合、または.sr-onlyクラスで隠された追加のテキストなどの代替手段によって含まれていることを確認してください。

ピルバッジ

pillプロパティを使用して、バッジをより丸く（より大きなボーダー半径と追加の水平パディング）します。Bootstrap v3のバッジを逃している場合に役立ちます。

<div>
  <b-badge pill variant="primary">Primary</b-badge>
  <b-badge pill variant="secondary">Secondary</b-badge>
  <b-badge pill variant="success">Success</b-badge>
  <b-badge pill variant="danger">Danger</b-badge>
  <b-badge pill variant="warning">Warning</b-badge>
  <b-badge pill variant="info">Info</b-badge>
  <b-badge pill variant="light">Light</b-badge>
  <b-badge pill variant="dark">Dark</b-badge>
</div>

<!-- b-badge-pill.vue -->

アクション可能なバッジ

hrefプロパティ（リンク）またはtoプロパティ（router-links）のいずれかを指定することにより、ホバーおよびフォーカス状態のアクション可能なバッジをすばやく提供します。

<div>
  <b-badge href="#" variant="primary">Primary</b-badge>
  <b-badge href="#" variant="secondary">Secondary</b-badge>
  <b-badge href="#" variant="success">Success</b-badge>
  <b-badge href="#" variant="danger">Danger</b-badge>
  <b-badge href="#" variant="warning">Warning</b-badge>
  <b-badge href="#" variant="info">Info</b-badge>
  <b-badge href="#" variant="light">Light</b-badge>
  <b-badge href="#" variant="dark">Dark</b-badge>
</div>

<!-- b-badge-action.vue -->

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

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

<b-badge>

機能コンポーネント
ソースを表示

プロパティ

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

プロパティ
（クリックして昇順に並べ替え）
タイプ
（クリックして昇順に並べ替え）
デフォルト
説明
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を示します
no-prefetch
Booleanfalse<nuxt-link> プロパティ：Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.jsはコード分割されたページを自動的にプリフェッチします。「no-prefetch」を設定すると、特定のリンクのこの機能が無効になります
pill
Booleanfalse`true`に設定すると、バッジがピルスタイルでレンダリングされます
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>`固有のプロパティのみがコンポーネントに渡されることに注意してください）
tag
String'span'デフォルトのタグの代わりにレンダリングするHTMLタグを指定します
target
String'_self'<b-link> プロパティ：レンダリングされたリンクに`target`属性を設定します
to
Object または String<router-link> プロパティ：リンクのターゲットルートを示します。クリックすると、toプロパティの値が内部で`router.push()`に渡されるため、値は文字列またはLocation記述子オブジェクトのいずれかになります
variant
String'secondary'Bootstrapテーマカラーバリアントの1つをコンポーネントに適用します

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

スロット

名前
説明
default バッジに配置するコンテンツ

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

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

コンポーネント
名前付きエクスポート
インポートパス
<b-badge>BBadgebootstrap-vue

例

import { BBadge } from 'bootstrap-vue'
Vue.component('b-badge', BBadge)

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

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

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

例

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