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

アバター

アバターは BootstrapVue カスタムコンポーネントであり、通常、ユーザープロフィールを画像、アイコン、または短いテキストとして表示するために使用されます。<b-avatar> は、カラーバリアントや丸みなどの外観をカスタマイズするためのいくつかのプロパティを提供し、オプションでボタン、リンク、またはルーターリンクとして機能することをサポートします。

BootstrapVue v2.8.0 以降で使用可能です。

概要

アバターは軽量コンポーネントであり、デフォルトではインラインでレンダリングされるため、隣接するプレーンテキストと垂直方向に中央揃えされます。また、他のコンポーネントの子として使用することもできます。

<template>
  <div>
    <p>Using stand-alone:<p/>
    <div class="mb-4">
      <b-avatar></b-avatar>
      <b-avatar variant="primary" text="BV"></b-avatar>
      <b-avatar variant="info" src="https://placekitten.com/300/300"></b-avatar>
      <b-avatar variant="success" icon="people-fill"></b-avatar>
    </div>
    <p>Using in components (list group) example:<p/>
    <b-list-group style="max-width: 300px;">
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar class="mr-3"></b-avatar>
        <span class="mr-auto">J. Circlehead</span>
        <b-badge>5</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="primary" text="BV" class="mr-3"></b-avatar>
        <span class="mr-auto">BootstrapVue</span>
        <b-badge>12</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="info" src="https://placekitten.com/300/300" class="mr-3"></b-avatar>
        <span class="mr-auto">Super Kitty</span>
        <b-badge>9</b-badge>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="success" icon="people-fill" class="mr-3"></b-avatar>
        <span class="mr-auto">ACME group</span>
        <b-badge>7</b-badge>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<!-- b-avatar.vue -->

アバターの種類

アバターのコンテンツは、画像、アイコン、または短いテキスト文字列のいずれかになります。他のコンテンツが指定されていない場合、アバターコンテンツはデフォルトで `person-fill` アイコン になります。

デフォルトスロットを介してカスタムコンテンツを提供することもできますが、コンテンツに追加のスタイルを適用する必要がある場合があります。

画像コンテンツ

`src` プロパティを使用して、アバターコンテンツとして使用する画像の URL を指定します。画像は縦横比が 1:1（幅と高さが等しい）である必要があります。そうでない場合、画像のアスペクト比が歪みます。画像は、アバターの境界ボックス内に収まるように拡大または縮小されます。

<template>
  <div class="mb-2">
    <b-avatar src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar src="https://placekitten.com/300/300" size="6rem"></b-avatar>
  </div>
</template>

<!-- b-avatar-src.vue -->

注意事項

  • モジュールバンドラーとプロジェクト相対画像 URL を使用する場合、詳細についてはコンポーネント img src 解決リファレンスセクションを参照してください。
  • `src` プロパティは、`icon` プロパティと `text` プロパティよりも優先されます。
  • 2.11.0+ 画像の読み込みに失敗した場合、アバターは `icon` または `text` プロパティの値にフォールバックします。 `icon` プロパティも `text` プロパティも指定されていない場合、デフォルトのアバターアイコンが表示されます。また、画像の読み込みに失敗した場合、`img-error` イベントが発行されます。
  • 画像は正常に読み込まれない限り、バリアントカラーは通常表示されません。バリアントは、画像アバターがアクション可能なアバターでもある場合、フォーカススタイルに影響します。

アイコンコンテンツ

`icon` プロパティを使用して、BootstrapVue のアイコンのいずれかをアバターコンテンツとして簡単に使用できます。このプロパティは、有効なアイコン名に設定する必要があります。アイコンは、`size` プロパティに応じてスケーリングされます。

<template>
  <div class="mb-2">
    <b-avatar icon="people-fill"></b-avatar>
    <b-avatar icon="star-fill"></b-avatar>
    <b-avatar icon="music-note"></b-avatar>
    <b-avatar icon="star-fill" size="4em"></b-avatar>
  </div>
</template>

<!-- b-avatar-icon.vue -->

注意事項

  • BootstrapVue アイコン名を指定する場合、完全な `BootstrapVueIcons` プラグインを使用していない場合は、対応するアイコンコンポーネントを（コンポーネント/ページにローカルに、またはグローバルに）登録する必要があります。
  • `icon` プロパティは `text` プロパティよりも優先されます。
  • `text`、`src`、または `icon` プロパティが指定されておらず、デフォルトスロットにコンテンツがない場合、`person-fill` アイコンが使用されます。

テキストコンテンツ

`text` プロパティを使用して、アバターのコンテンツとして短い文字列を指定できます。文字列は短く（1〜3文字）する必要があり、CSS によってすべて大文字に変換されます。フォントサイズは、`size` プロパティの設定に応じてスケーリングされます。

<template>
  <div class="mb-2">
    <b-avatar text="BV"></b-avatar>
    <b-avatar text="a"></b-avatar>
    <b-avatar text="Foo"></b-avatar>
    <b-avatar text="BV" size="4rem"></b-avatar>
  </div>
</template>

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

カスタムコンテンツ

デフォルトスロットを使用して、アバターにカスタムコンテンツをレンダリングし、外観をより細かく制御したり、カスタムアイコンや SVG などを使用したりします。例：

<b-avatar><custom-icon></custom-icon></b-avatar>

複数行テキストの例

<template>
  <div class="mb-2">
    <b-avatar size="4em">Hello<br>World</b-avatar>
    <b-avatar size="4em">你好<br>世界</b-avatar>
  </div>
</template>

<!-- b-avatar-default-slot-multi-line.vue -->

注意事項

  • デフォルトスロットは、 `text`、`src`、および `icon` プロパティよりも優先されます。
  • デフォルトスロットコンテンツは、適切に中央揃えされるように <span> 要素でラップされます。
  • アバターコンポーネントの形状を補償するために、カスタムコンテンツにスタイルを追加する必要がある場合があります。

スタイリング

バリアント

`variant` プロパティを使用して、Bootstrap テーマバリアントカラーのいずれかを指定します。デフォルトのバリアントは `secondary` です。

<template>
  <div>
    <b-avatar variant="secondary"></b-avatar>
    <b-avatar variant="primary"></b-avatar>
    <b-avatar variant="dark"></b-avatar>
    <b-avatar variant="light"></b-avatar>
    <b-avatar variant="success"></b-avatar>
    <b-avatar variant="danger"></b-avatar>
    <b-avatar variant="warning"></b-avatar>
    <b-avatar variant="info"></b-avatar>
  </div>
</template>

<!-- b-avatar-variant.vue -->

SASS テーマ変数を介して追加のカスタムバリアントを定義した場合、カスタムバリアントも使用できます。

サイズ設定

デフォルトでは、アバターのサイズは `2.5em`（現在のフォントサイズに比例）です。現在のフォントサイズを変更するか、プロパティ `size` を使用して明示的なサイズを指定することで、アバターのサイズを変更できます。 `sm`、`md`、`lg` のサイズは、デフォルトで `1.5em`、`2.5em`、`3.5em` です。数値はピクセル値に変換されます。その他の値には、単位（`px`、`em`、`rem` など）を含める必要があります。

<template>
  <div>
    <b-avatar></b-avatar>
    <b-avatar size="sm"></b-avatar>
    <b-avatar size="lg"></b-avatar>
    <b-avatar :size="24"></b-avatar>
    <b-avatar size="3em"></b-avatar>
    <b-avatar size="72px"></b-avatar>
  </div>
</template>

<!-- b-avatar-size.vue -->

**注：** アバターは常に縦横比 1:1 でレンダリングされます。

正方形

正方形のアバターが必要ですか？ `square` プロパティを `true` に設定するだけです。

<template>
  <div>
    <b-avatar square></b-avatar>
  </div>
</template>

<!-- b-avatar-square.vue -->

丸み

<b-avatar> は、円形の境界線半径でレンダリングされます。プロパティ `rounded` を `true`、`sm`、`lg`、`top`、`left`、`right`、または `bottom` のいずれかの値に設定することで、丸みを変更できます。 `true`（または空の文字列 ``）に設定すると、Bootstrap のデフォルトの中程度の丸みが使用されます。

<template>
  <div>
    <b-avatar rounded="sm"></b-avatar>
    <b-avatar rounded></b-avatar>
    <b-avatar rounded="lg"></b-avatar>
    <b-avatar rounded="top"></b-avatar>
    <b-avatar rounded="left"></b-avatar>
    <b-avatar rounded="right"></b-avatar>
    <b-avatar rounded="bottom"></b-avatar>
  </div>
</template>

<!-- b-avatar-rounding.vue -->

注意事項

  • `square` プロパティは `rounded` プロパティよりも優先されます。
  • `square` プロパティの代わりに、`rounded` プロパティを文字列 `0` に設定して、正方形のアバターを作成することもできます。

配置

デフォルトでは、<b-avatar> は隣接するコンテンツと垂直方向に中央揃えされます。場合によっては、テキストのみのアバターのテキストを隣接するテキストに揃えるなど、配置を変更したい場合があります。コンポーネントに垂直方向の配置ユーティリティクラス（`<b-avatar class="align-baseline" ...>` や `<b-avatar class="align-top" ...>` など）を設定するだけです。

アクション可能なアバター

クリックに反応するアバター、またはクリックすると URL/ルートが変更されるアバターを簡単に作成できます。アクション可能なアバターは、ドキュメントのタブシーケンスに表示され、スクリーンリーダーとキーボードのみのユーザーの両方でアクセスできます。

画像アバターは、アクション可能な場合、ホバー時に画像に基本的なスケール変換を採用します。

ボタン

モーダルの開きをトリガーしたり、アクションをトリガーしたりしますか？ `button` プロパティを設定して、<b-avatar> を <button> 要素としてレンダリングするように指示します。ボタンとしてレンダリングされると、コンポーネントはクリックされるたびに `click` イベントを発行します。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar button @click="onClick" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Button Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" src="https://placekitten.com/300/300"></b-avatar>
      Button Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar button @click="onClick" icon="star-fill" class="align-center"></b-avatar>
      Button Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<script>
  export default {
    methods: {
      onClick() {
        this.$bvModal.msgBoxOk('User name: Fred Flintstone', {
          title: 'User Info',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'success',
          headerClass: 'p-2 border-bottom-0',
          footerClass: 'p-2 border-top-0'
        })
      }
    }
  }
</script>

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

プロパティ `button-type` を使用して、レンダリングするボタンのタイプを制御できます。サポートされている値は、`button`（デフォルト）、`submit`、または `reset` です。

アバターをリンクまたはルーターリンクにしたいですか？ `href` プロパティまたは `to` プロパティ（それぞれ）を設定するだけです。 `to` プロパティは、文字列パスまたは `Location` オブジェクトのいずれかになります。 `to` プロパティを使用するには、`Vue router`（または同等のもの）がインストールされている必要があります。

<template>
  <b-list-group>
    <b-list-group-item>
      <b-avatar href="#foo" variant="primary" text="FF" class="align-baseline"></b-avatar>
      Link Text Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#bar" src="https://placekitten.com/300/300"></b-avatar>
      Link Image Avatar
    </b-list-group-item>
    <b-list-group-item>
      <b-avatar href="#baz" icon="star-fill" class="align-center"></b-avatar>
      Link Icon Avatar
    </b-list-group-item>
  </b-list-group>
</template>

<!-- b-avatar-href.vue -->

注意事項

バッジ付きアバター

2.12.0+

`badge` プロパティまたは `badge` スロットを使用して、アバターにバッジを簡単に追加できます。バッジバリアントは、`badge-variant` プロパティを使用して設定できます。バッジはアバターのサイズに合わせてスケーリングされます。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-variant="danger" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="warning" icon="people-fill"></b-avatar>
    <b-avatar badge badge-variant="success" src="https://placekitten.com/300/300"></b-avatar>
    <b-avatar badge badge-variant="dark" text="BV"></b-avatar>
    <b-avatar square badge badge-variant="dark" text="BV"></b-avatar>
  </div>
</template>

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

バッジコンテンツ

文字列を badge prop に指定するか、名前付きスロット 'badge' を使用して、バッジにテキストコンテンツを追加します。

<template>
  <div>
    <b-avatar badge="BV"></b-avatar>
    <b-avatar badge="7" variant="primary" badge-variant="dark"></b-avatar>
    <b-avatar badge-variant="info" src="https://placekitten.com/300/300">
      <template #badge><b-icon icon="star-fill"></b-icon></template>
    </b-avatar>
  </div>
</template>

<!-- b-avatar-badge-content.vue -->

バッジの位置

デフォルトでは、バッジはアバターの右下に表示されます。 ブール値プロパティ badge-top と badge-right を使用して、側面を切り替えることができます。 両方のプロパティを組み合わせると、バッジがアバターの右上に移動します。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-left></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-left badge-top></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-position.vue -->

badge-offset prop を使用して、バッジのオフセットを制御します。 badge-offset は、有効な CSS 長さ文字列（例：'2px'、'-2px'、'0.5em' など）である必要があります。正の値はバッジを内側に移動し、負の値はバッジを外側に移動します。

<template>
  <div>
    <b-avatar badge></b-avatar>
    <b-avatar badge badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-offset="2px"></b-avatar>
    <b-avatar badge badge-top></b-avatar>
    <b-avatar badge badge-top badge-offset="-0.5em"></b-avatar>
    <b-avatar badge badge-top badge-offset="-2px"></b-avatar>
    <b-avatar badge badge-top badge-offset="2px"></b-avatar>
  </div>
</template>

<!-- b-avatar-badge-offset.vue -->

アバターグループ

v2.14.0以降

複数のアバターを <b-avatar-group> コンポーネントで囲むことで、グループ化します。

<template>
  <div>
    <b-avatar-group size="60px">
      <b-avatar></b-avatar>
      <b-avatar text="BV" variant="primary"></b-avatar>
      <b-avatar src="https://placekitten.com/300/300" variant="info"></b-avatar>
      <b-avatar text="OK" variant="danger"></b-avatar>
      <b-avatar variant="warning"></b-avatar>
      <b-avatar src="https://placekitten.com/320/320" variant="dark"></b-avatar>
      <b-avatar icon="music-note" variant="success"></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group.vue -->

注意事項

  • <b-avatar-group> の variant、square、rounded プロパティは、個々のアバターの対応するプロパティよりも優先されます。

グループサイズ

アバターのサイズを変更するには、<b-avatar-group> で size プロパティを使用します。 size プロパティは、<b-avatar> の size プロパティと同じタイプの値を受け入れます。 <b-avatar-group> 内に配置された個々のアバターでは、size プロパティは無視されます。

<template>
  <div>
    <b-avatar-group size="5rem">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-size.vue -->

グループバリアント

variant プロパティを使用して、<b-avatar-group> 内のすべての子アバターに色を付けます。 variant プロパティが設定されている場合、個々のアバターで指定された variant はオーバーライドされます。

<template>
  <div>
    <b-avatar-group variant="success">
      <b-avatar></b-avatar>
      <b-avatar variant="info"></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-variant.vue -->

グループの丸め

variant プロパティと同様に、<b-avatar-group> の square および rounded プロパティは、個々の子アバターの対応するプロパティよりも優先されます。

<template>
  <div>
    <b-avatar-group rounded="lg">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-rounded.vue -->

グループのオーバーラップ

デフォルトでは、<b-avatar-group> 内の子アバターは、0.3 の係数（アバターのサイズに対する相対値）でオーバーラップします。 overlap プロパティを 0 から 1 の間の値に設定することで、オーバーラップ量を制御できます。 0 はオーバーラップなし、1 は 100％ オーバーラップを意味します。

<template>
  <div>
    <b-avatar-group overlap="0.65">
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
      <b-avatar></b-avatar>
    </b-avatar-group>
  </div>
</template>

<!-- b-avatar-group-overlap.vue -->

アクセシビリティ

aria-label プロパティを使用して、アバターにアクセス可能な、スクリーンリーダーフレンドリーなラベルを提供します。バッジがある場合は、バッジの目的またはコンテンツに関する情報を aria-label に追加することをお勧めします（例：'3 件のメッセージ'、'オンライン' など）。

click イベントは、button、href、または to プロパティが設定されているかどうかに関係なく発行されますが、クリックイベントがアクションをトリガーする場合（または、ルート変更または URL 変更の場合は to または href プロパティを使用する場合）は、アクセシビリティの理由から button プロパティを使用することを強くお勧めします。

実装に関する注意事項

アバターは <b-badge> および <b-button> コンポーネントに基づいており、そのため、Bootstrap の badge-* および btn-* バリアントクラス、および rounded-* ユーティリティクラス に依存します。

<b-avatar> は、適切なスタイル設定のために BootstrapVue のカスタム CSS も必要とします。

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

<b-avatar>

v2.8.0以降
ソースを表示

プロパティ

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

プロパティ
（クリックして昇順にソート）
タイプ
（クリックして昇順にソート）
デフォルト
説明
active-class
文字列<router-link> prop: リンクがアクティブなときに適用されるアクティブな CSS クラスを設定します。 通常は、これをクラス名 'active' に設定します
alt
v2.9.0以降 		文字列'avatar'画像とアイコンのアバターの 'alt' 属性に配置する値
append
ブール値false<router-link> prop: append プロパティを設定すると、常に相対パスが現在のパスに追加されます
aria-label
文字列レンダリングされた要素の `aria-label` 属性の値を設定します
badge
v2.12.0以降 		ブール値 または 文字列false`true` の場合、アバターに空のバッジを表示します。または、バッジのコンテンツを表す文字列を設定します
badge-left
v2.12.0以降 		ブール値false`true` の場合、バッジを右ではなく左に配置します
badge-offset
v2.12.0以降 		文字列バッジをオフセットする CSS 長さ。 正の値はバッジを内側に移動し、負の値はバッジを外側に移動します
badge-top
v2.12.0以降 		ブール値false`true` の場合、バッジを下ではなく上に配置します
badge-variant
v2.12.0以降 		文字列'primary'Bootstrap テーマカラーバリアントのいずれかをバッジに適用します
button
ブール値false`true` に設定すると、アバターをボタンとしてレンダリングします
button-type
文字列'button'レンダリングするボタンのタイプ（例：`button`、`submit`、`reset`）。button プロパティが設定されていない場合は効果がありません
disabled
ブール値false`true` に設定すると、コンポーネントの機能が無効になり、無効状態になります
exact
ブール値false<router-link> prop: デフォルトのアクティブクラスマッチング動作は包含一致です。 このプロパティを設定すると、モードがルートと完全に一致するように強制されます
exact-active-class
文字列<router-link> prop: リンクが完全一致でアクティブなときに適用されるアクティブな CSS クラスを設定します。 通常は、これをクラス名 'active' に設定します
exact-path
ブール値false<router-link> prop: URL のパスセクションのみを使用して一致させることができ、クエリとハッシュセクションは事実上無視されます
exact-path-active-class
文字列<router-link> prop: リンクが完全パス一致でアクティブなときに適用されるアクティブな CSS クラスを設定します。 通常は、これをクラス名 'active' に設定します
href
文字列<b-link> prop: 標準の a リンクのリンク先 URL を示します
icon
文字列アバターに使用するアイコン名。 すべて小文字にする必要があります。 `text` または `src` プロパティが指定されていない場合は、デフォルトで `person-fill` になります
no-prefetch
ブール値false<nuxt-link> prop: Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。 `no-prefetch` を設定すると、特定のリンクに対してこの機能が無効になります
prefetch
v2.15.0以降 		ブール値null<nuxt-link> prop: Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。 `prefetch` を `true` または `false` に設定すると、`router.prefetchLinks` のデフォルト値が上書きされます
rel
文字列null<b-link> prop: レンダリングされたリンクの `rel` 属性を設定します
replace
ブール値false<router-link> prop: replace プロパティを設定すると、クリックされたときに `router.push()` の代わりに `router.replace()` が呼び出されるため、ナビゲーションは履歴レコードを残しません
rounded
ブール値 または 文字列falseアバターに適用する丸めのタイプを指定します。 `square` プロパティが優先されます。 詳細については、ドキュメントを参照してください
router-component-name
v2.15.0以降 		文字列<b-link> prop: BootstrapVue は `<router-link>` と `<nuxt-link>` を自動的に検出します。 `<router-link>` に基づくサードパーティのリンクコンポーネントを使用する場合、このプロパティをコンポーネント名に設定します。 たとえば、Gridsome を使用している場合は 'g-link' に設定します（`<router-link>` 固有のプロパティのみがコンポーネントに渡されます）
size
数値 または 文字列アバターのサイズ。 詳細については、ドキュメントを参照してください
square
ブール値falseアバターの丸めを無効にし、アバターを角が四角形にレンダリングします
src
文字列アバターに使用する画像の URL
target
文字列'_self'<b-link> prop: レンダリングされたリンクの `target` 属性を設定します
text
文字列アバターに配置するテキスト
to
オブジェクト または 文字列<router-link> prop: リンクのターゲットルートを示します。 クリックされると、to プロパティの値が内部的に `router.push()` に渡されるため、値は文字列または Location 記述子オブジェクトのいずれかになります
variant
文字列'secondary'Bootstrap テーマカラーバリアントのいずれかをコンポーネントに適用します

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

スロット

名前
説明
badge v2.12.0以降アバターのオプションバッジに配置するコンテンツ。 `badge` プロパティをオーバーライドします
default アバターに配置するコンテンツ。 `text`、`src`、`icon-name` プロパティをオーバーライドします

イベント

イベント
引数
説明
click
  1. event - ネイティブイベントオブジェクト
アバターがボタンまたはリンクとしてレンダリングされたときにクリックされると発行されます。 それ以外の場合は発行されません
img-error v2.11.0以降
  1. event - ネイティブイベントオブジェクト
画像の `src` が指定されていて、画像の読み込みに失敗した場合に発行されます

<b-avatar-group>

v2.14.0以降
ソースを表示

プロパティ

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

プロパティ
タイプ
デフォルト
説明
オーバーラップ
数値 または 文字列0.3重なりの量を指定する浮動小数点数。`0` は重なりなし、`1` は 100% の重なりです。
rounded
ブール値 または 文字列false子アバターに適用する丸め処理のタイプを指定します。`square` プロパティが優先されます。詳細はドキュメントを参照してください。
size
文字列すべての子アバターのサイズ。詳細はドキュメントを参照してください。
square
ブール値false子アバターの丸め処理を無効にし、各アバターを角が四角形にレンダリングします。
タグ
文字列'div'デフォルトのタグの代わりにレンダリングする HTML タグを指定します。
variant
文字列Bootstrap テーマカラーバリアントのいずれかをすべての子アバターに適用します。

スロット

名前
説明
default アバターグループに配置するコンテンツ（アバター）

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

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

コンポーネント
名前付きエクスポート
インポートパス
<b-avatar>BAvatarbootstrap-vue
<b-avatar-group>BAvatarGroupbootstrap-vue

例

import { BAvatar } from 'bootstrap-vue'
Vue.component('b-avatar', BAvatar)

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

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

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

例

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