オーバーレイ

BootstrapVue のカスタム b-overlay コンポーネントは、特定の要素またはコンポーネントとそのコンテンツを視覚的に覆い隠すために使用されます。これは、要素またはコンポーネント内の状態の変化をユーザーに示し、ローダー、警告/アラート、プロンプトなどの作成に使用できます。

v2.7.0 以降の BootstrapVue で利用可能

概要

<b-overlay> は、ほぼすべてのものを覆い隠すために使用できます。ユースケースの例としては、フォーム、テーブル、削除確認ダイアログなど、アプリケーションがバックグラウンドタスクを実行中であることを通知する必要がある場所、特定のコンポーネントが利用できないことを通知する場合、またはエンドユーザーに追加のコンテキストを提供する場合などがあります。

<b-overlay> は、要素またはコンポーネントをオーバーレイ（ラップ）するために使用できます（デフォルトの動作）。または、position: relative 要素の子孫として配置できます（非ラップモード）。

オーバーレイの可視性は、show プロパティで制御されます。デフォルトでは、オーバーレイは表示されません。

このコンポーネントは、コンテンツ（またはページ）を視覚的に覆い隠すだけであることに注意してください。アクセシビリティの詳細と懸念については、下記のアクセシビリティセクションを参照してください。

デフォルトのラップモードの例

<template>
  <div>
    <b-overlay :show="show" rounded="sm">
      <b-card title="Card with overlay" :aria-hidden="show ? 'true' : null">
        <b-card-text>Laborum consequat non elit enim exercitation cillum.</b-card-text>
        <b-card-text>Click the button to toggle the overlay:</b-card-text>
        <b-button :disabled="show" variant="primary" @click="show = true">
          Show overlay
        </b-button>
      </b-card>
    </b-overlay>
    <b-button class="mt-3" @click="show = !show">Toggle overlay</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

<!-- b-overlay.vue -->

オプション

オーバーレイのスタイリングや、オーバーレイ内にカスタムコンテンツを提供するための多くのオプションが利用可能です。

variant プロパティを使用して、背景の背景色を制御できます。バリアントは、Bootstrap の背景バリアントユーティリティクラスの1つに変換されます。opacity プロパティ（不透明度の値は 0 から 1 の範囲）を使用して背景の不透明度を制御します。また、背景のぼかしは blur プロパティを使用して制御できます。

<template>
  <div>
    <b-row>
      <b-col lg="6" aria-controls="overlay-background">
        <b-form-group label="Variant" label-for="bg-variant" label-cols-sm="4" label-cols-lg="12">
          <b-form-select id="bg-variant" v-model="variant" :options="variants"></b-form-select>
        </b-form-group>

        <b-form-group label="Opacity" label-for="bg-opacity" label-cols-sm="4" label-cols-lg="12">
          <b-input-group>
            <b-form-input
              id="bg-opacity"
              v-model="opacity"
              type="range"
              number
              min="0"
              max="1"
              step="0.01"
            ></b-form-input>
            <b-input-group-append is-text class="text-monospace">
              {{ opacity.toFixed(2) }}
            </b-input-group-append>
          </b-input-group>
        </b-form-group>

        <b-form-group label="Blur" label-for="bg-blur" label-cols-sm="4" label-cols-lg="12">
          <b-form-select id="bg-blur" v-model="blur" :options="blurs"></b-form-select>
        </b-form-group>
      </b-col>

      <b-col lg="6">
        <b-overlay
          id="overlay-background"
          show
          :variant="variant"
          :opacity="opacity"
          :blur="blur"
          rounded="sm"
        >
          <b-card title="Card with overlay" aria-hidden="true">
            <b-card-text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </b-card-text>

            <b-button disabled variant="primary">Button</b-button>
          </b-card>
        </b-overlay>
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        variant: 'light',
        opacity: 0.85,
        blur: '2px',
        variants: [
          'transparent',
          'white',
          'light',
          'dark',
          'primary',
          'secondary',
          'success',
          'danger',
          'warning',
          'info',
        ],
        blurs: [
          { text: 'None', value: '' },
          '1px',
          '2px',
          '5px',
          '0.5em',
          '1rem'
        ]
      }
    }
  }
</script>

<!-- b-overlay-background.vue -->

variant プロパティの代わりに、bg-color プロパティを使用して CSS カラー文字列値を指定できます。bg-color に値が指定されている場合、variant プロパティ値は無視されます。

注意事項

背景のぼかしは、一部のブラウザー（例：IE 11）では利用できません。
ぼかしを表示するには、不透明度レベルが比較的高い必要があります。

フェードトランジション

デフォルトでは、オーバーレイは表示または非表示にするときに Bootstrap のフェードトランジションを使用します。<b-overlay> に no-fade プロパティを追加することで、フェードトランジションを無効にできます。

デフォルトのスピナースタイリング

デフォルトのオーバーレイコンテンツは、<b-spinner> で、タイプは 'border' です。次のプロパティを使用して、スピナーの外観を制御できます

spinner-type: 現在サポートされている値は、'border' （デフォルト）または 'grow' です。
spinner-variant: スピナーのバリアントテーマカラー。デフォルトは null で、現在のフォントカラーを継承します。
spinner-small: true に設定すると、小さいサイズのスピナーがレンダリングされます。

<template>
  <div>
    <b-overlay
      show
      spinner-variant="primary"
      spinner-type="grow"
      spinner-small
      rounded="sm"
      style="max-width: 320px;"
    >
      <b-card title="Card with spinner style" aria-hidden="true">
        <b-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </b-card-text>
        <b-button disabled variant="primary">Button</b-button>
      </b-card>
    </b-overlay>
  </div>
</template>

<!-- b-overlay-spinner-style.vue -->

オーバーレイの角の丸め

デフォルトでは、オーバーレイの背景には四角い角があります。ラップしているコンテンツに丸い角がある場合は、rounded プロパティを使用して、覆い隠されたコンテンツの丸い角に合わせてオーバーレイの角を丸めることができます。

可能な値は次のとおりです

デフォルト（中）の丸めを適用するには、true （または空文字列 ''）
背景オーバーレイに丸めを適用しない場合は、false （デフォルト）
小さい丸い角の場合は 'sm'
大きい丸い角の場合は 'lg'
ピルスタイルの丸い角の場合は 'pill'
円形（または楕円形）の丸めの場合は 'circle'
上2つの角のみを丸める場合は 'top'
下2つの角のみを丸める場合は 'bottom'
左2つの角のみを丸める場合は 'left'
右2つの角のみを丸める場合は 'right'

<template>
  <div>
    <b-button @click="show = !show">Toggle overlay</b-button>
    <b-row class="text-center mt-3">
      <b-col md="6">
        <p>With rounding</p>
        <b-overlay :show="show" class="d-inline-block" rounded="circle">
          <b-img thumbnail rounded="circle" fluid src="https://picsum.photos/200/200/?image=54" alt="Image 1"></b-img>
        </b-overlay>
      </b-col>
      <b-col md="6">
        <p>Without rounding</p>
        <b-overlay :show="show" class="d-inline-block">
          <b-img thumbnail rounded="circle" fluid src="https://picsum.photos/200/200/?image=54" alt="Image 1"></b-img>
        </b-overlay>
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    }
  }
</script>

<!-- b-overlay-rounded.vue -->

カスタムオーバーレイコンテンツ

オプションでスコープ付きのスロット overlay を使用して、オーバーレイにカスタムコンテンツ（デフォルトのスピナーを置き換える）を配置します。

<template>
  <div>
    <b-overlay :show="show" rounded="sm" @shown="onShown" @hidden="onHidden">
      <b-card title="Card with custom overlay content" :aria-hidden="show ? 'true' : null">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
        <b-card-text>Click the button to toggle the overlay:</b-card-text>
        <b-button ref="show" :disabled="show" variant="primary" @click="show = true">
          Show overlay
        </b-button>
      </b-card>
      <template #overlay>
        <div class="text-center">
          <b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon>
          <p id="cancel-label">Please wait...</p>
          <b-button
            ref="cancel"
            variant="outline-danger"
            size="sm"
            aria-describedby="cancel-label"
            @click="show = false"
          >
            Cancel
          </b-button>
        </div>
      </template>
    </b-overlay>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      onShown() {
        // Focus the cancel button when the overlay is showing
        this.$refs.cancel.focus()
      },
      onHidden() {
        // Focus the show button when the overlay is removed
        this.$refs.show.focus()
      }
    }
  }
</script>

<!-- b-overlay-overlay-slot.vue -->

次のスコーププロパティが、overlay スロットで使用できます

プロパティ	説明
`spinnerVariant`	`spinner-variant` プロパティの値
`spinnerType`	`spinner-type` プロパティの値
`spinnerSmall`	`spinner-small` プロパティの値

オーバーレイにインタラクティブなコンテンツを配置する場合は、アクセシビリティの理由から、カスタムコンテンツのコンテナまたはオーバーレイコンテンツ内のフォーカス可能なコントロールの1つにフォーカスする必要があります。オーバーレイコンテンツがドキュメントで利用可能になったときを知るために、<b-overlay> 'shown' イベントをリッスンできます。

オーバーレイコンテンツのセンタリング

デフォルトでは、オーバーレイコンテンツはオーバーレイ領域内で水平および垂直方向に中央揃えになります。センタリングを無効にするには、no-center プロパティを true に設定します。

次の例では、no-center プロパティを設定し、カスタムオーバーレイのスロットコンテンツを右上隅に絶対配置しました。

<template>
  <div>
    <b-overlay no-center show rounded="sm">
      <template #overlay>
        <b-icon
          icon="stopwatch"
          variant="info"
          scale="2"
          shift-v="8"
          shift-h="8"
          class="position-absolute"
          style="top: 0; right: 0"
        ></b-icon>
      </template>
      <b-card title="Card with no-center overlay" aria-hidden="true">
        <b-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua.
        </b-card-text>
        <b-button disabled variant="primary">Button</b-button>
      </b-card>
    </b-overlay>
  </div>
</template>

<!-- b-overlay-no-center.vue -->

幅

<b-overlay> はデフォルトで幅が 100% になります。インラインまたはインラインブロック要素をラップする場合は、クラス d-inline-block （例：<b-overlay class="d-inline-block">）を追加する必要があります。

また、ユーティリティクラスまたは CSS スタイルを使用して、オーバーレイのラップコンテナ要素の幅を制御することもできます。

非ラップモード

デフォルトでは、<b-overlay> はデフォルトのスロットのコンテンツをラップします。場合によっては、親コンテナを覆い隠したい場合があります。no-wrap プロパティを使用して、ラップのレンダリングを無効にします（およびデフォルトのスロットを無視します）。これには、覆い隠される祖先要素に相対配置（ユーティリティクラス 'position-relative' または CSS スタイル 'position: relative;' のいずれか）が必要であることに注意してください。

<template>
  <div>
    <div class="position-relative p-4 bg-info">
      <p class="text-light font-weight-bold">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <b-card title="Card with parent overlay">
        <b-card-text>Laborum consequat non elit enim exercitation cillum.</b-card-text>
        <b-card-text>Click the button to toggle the overlay:</b-card-text>
        <b-button :disabled="show" variant="primary" @click="show = true">
          Show overlay
        </b-button>
      </b-card>
      <p class="text-light font-weight-bold mb-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <b-overlay :show="show" no-wrap>
      </b-overlay>
    </div>
    <b-button class="mt-3" @click="show = !show">Toggle overlay</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

<!-- b-overlay-nowrap.vue -->

Bootstrap v4 の一部のコンポーネントスタイルには、相対配置が定義されています（例：カード、colsなど）。マークアップで <b-overlay> の配置を調整する必要がある場合があります。

たとえば、<b-card> は相対配置であるため、<b-overlay no-wrap> を <b-card> の子孫として配置できます

<template>
  <div>
    <b-card header="Card header" footer="Card footer">
      <b-media>
        <template #aside>
          <b-img
            thumbnail
            rounded="circle"
            src="https://picsum.photos/72/72/?image=58"
            alt="Image"
          ></b-img>
        </template>
        <p class="mb-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </b-media>
      <b-overlay :show="show" no-wrap></b-overlay>
    </b-card>
    <b-button @click="show = !show" class="mt-3">Toggle overlay</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    }
  }
</script>

<!-- b-overlay-card-relative.vue -->

no-wrap モードの場合、<b-overlay> は、覆い隠された要素に aria-busy 属性を設定しません。アプリで、ページがビジー状態であることをスクリーンリーダーユーザーに通知する aria-live 領域を使用することもできます。

詳細と懸念事項については、下記のアクセシビリティセクションを参照してください。

`no-wrap` の絶対配置と固定配置

no-wrap プロパティを使用するときに、アプリまたはページ全体を覆い隠したい場合は、<b-overlay> でプロパティ fixed を設定することで、ビューポートの固定配置に切り替えることができます。これにより、ページのスクロールが無効になることはなく、ページのインタラクティブな要素はドキュメントのタブ順序に残ることに注意してください。

また、オーバーレイの z-index を調整して、背景が他のすべてのページ要素の上に表示されるようにする必要がある場合もあります。デフォルトの z-index 値を上書きするには、z-index プロパティを使用します。

詳細と懸念事項については、下記のアクセシビリティセクションを参照してください。

オーバーレイの z-index

状況によっては、オーバーレイで使用されるz-indexを調整する必要がある場合があります（DOM内の配置や隠蔽されるコンテンツによって異なります）。アプリケーションやユースケースに適した値をz-indexプロパティに設定するだけです。デフォルトのz-indexは10です。

アクセシビリティ

オーバーレイは視覚的なものに過ぎないことに注意してください。オーバーレイが表示されているときは、インタラクティブな要素（ボタン、リンクなど）を必ず無効にしてください。そうしないと、隠蔽された要素はキーボードナビゲーション（つまり、ドキュメントのタブシーケンス内）から到達可能になります。

隠蔽されたコンテンツにリンクがある場合は、<b-link>コンポーネントを使用することをお勧めします。これはdisabled状態をサポートしますが、ネイティブリンク（<a href="...">）および<router-link>コンポーネントはdisabled状態をサポートしていません。

オーバーレイが表示されているときは、隠蔽されたコンテンツにaria-hidden="true"またはaria-busy="true"属性を追加することもお勧めします。<b-overlay>コンポーネント（no-wrapを使用する場合）を含むラッパーにaria-hidden="true"を追加しないように注意してください。これは、スクリーンリーダーのユーザーにとってoverlayスロット内のインタラクティブなコンテンツを非表示にするためです。

overlayスロットにインタラクティブなコンテンツを配置する場合は、'shown'イベントが発行されたら、コンテンツにフォーカスを当てる必要があります。hiddenイベントを使用して、オーバーレイが表示されなくなったときに必要に応じて要素にフォーカスを戻すことができます。

ラッピングモード（プロパティno-wrapが設定されていない場合）を使用すると、ラッパーには属性aria-busy="true"が設定され、スクリーンリーダーのユーザーに、ラップされたコンテンツがビジー状態または読み込み状態であることを知らせます。プロパティno-wrapが設定されている場合、属性は適用されません。

プロパティno-wrapを使用し、場合によってはプロパティfixedを使用して、アプリケーションまたはページ全体を隠蔽する場合は、すべてのインタラクティブなページ要素（オーバーレイのコンテンツ以外の要素）が無効になっており、ドキュメントのタブシーケンスにないことを確認する必要があります。

ユースケースの例

以下は、<b-overlay>の一般的なユースケースのほんの一例です。すべての場合において、キーボードナビゲーション（つまりTabキー）やスクリーンリーダーによるアクセスを介して到達できないように、隠蔽された領域内のインタラクティブな要素をすべて無効にします。

詳細と注意事項については、アクセシビリティセクションを参照してください。

ローディングボタン

ローディングボタンを簡単に作成

<template>
  <div>
    <b-overlay
      :show="busy"
      rounded
      opacity="0.6"
      spinner-small
      spinner-variant="primary"
      class="d-inline-block"
      @hidden="onHidden"
    >
      <b-button
        ref="button"
        :disabled="busy"
        variant="primary"
        @click="onClick"
      >
        Do something
      </b-button>
    </b-overlay>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        busy: false,
        timeout: null
      }
    },
    beforeDestroy() {
      this.clearTimeout()
    },
    methods: {
      clearTimeout() {
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }
      },
      setTimeout(callback) {
        this.clearTimeout()
        this.timeout = setTimeout(() => {
          this.clearTimeout()
          callback()
        }, 5000)
      },
      onHidden() {
        // Return focus to the button once hidden
        this.$refs.button.focus()
      },
      onClick() {
        this.busy = true
        // Simulate an async request
        this.setTimeout(() => {
          this.busy = false
        })
      }
    }
  }
</script>

<!-- b-overlay-example-loading-button.vue -->

ビジー状態の入力グループ

この例では、入力とボタンを隠蔽します

<template>
  <div>
    <b-overlay :show="busy" rounded="lg" opacity="0.6" @hidden="onHidden">
      <template #overlay>
        <div class="d-flex align-items-center">
          <b-spinner small type="grow" variant="secondary"></b-spinner>
          <b-spinner type="grow" variant="dark"></b-spinner>
          <b-spinner small type="grow" variant="secondary"></b-spinner>
          <!-- We add an SR only text for screen readers -->
          <span class="sr-only">Please wait...</span>
        </div>
      </template>
      <b-input-group size="lg" :aria-hidden="busy ? 'true' : null">
        <b-form-input v-model="value" :disabled="busy"></b-form-input>
        <b-input-group-append>
          <b-button ref="button" :disabled="busy" variant="primary"  @click="onClick">
            Do something
          </b-button>
        </b-input-group-append>
      </b-input-group>
    </b-overlay>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Some value',
        busy: false,
        timeout: null
      }
    },
    beforeDestroy() {
      this.clearTimeout()
    },
    methods: {
      clearTimeout() {
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }
      },
      setTimeout(callback) {
        this.clearTimeout()
        this.timeout = setTimeout(() => {
          this.clearTimeout()
          callback()
        }, 5000)
      },
      onHidden() {
        // Return focus to the button
        this.$refs.button.focus()
      },
      onClick() {
        this.busy = true
        // Simulate an async request
        this.setTimeout(() => {
          this.busy = false
        })
      }
    }
  }
</script>

<!-- b-overlay-example-input-group.vue -->

フォーム確認プロンプトとアップロードステータス

この例は少し複雑ですが、no-wrapの使用と、overlayスロットを使用して、ユーザーにプロンプトダイアログを表示し、確認されたらアップロードステータスインジケーターを表示する方法を示しています。この例では、追加のアクセシビリティマークアップについても示します。

<template>
  <div>
    <b-form class="position-relative p-3" @submit.prevent="onSubmit">
      <b-form-group label="Name" label-for="form-name" label-cols-lg="2">
        <b-input-group>
          <b-input-group-prepend is-text>
            <b-icon icon="person-fill"></b-icon>
          </b-input-group-prepend>
          <b-form-input id="form-name" :disabled="busy"></b-form-input>
        </b-input-group>
      </b-form-group>

      <b-form-group label="Email" label-for="form-mail" label-cols-lg="2">
        <b-input-group>
          <b-input-group-prepend is-text>
            <b-icon icon="envelope-fill"></b-icon>
          </b-input-group-prepend>
          <b-form-input id="form-email" type="email" :disabled="busy"></b-form-input>
        </b-input-group>
      </b-form-group>

      <b-form-group label="Image" label-for="form-image" label-cols-lg="2">
        <b-input-group>
          <b-input-group-prepend is-text>
            <b-icon icon="image-fill"></b-icon>
          </b-input-group-prepend>
          <b-form-file id="form-image" :disabled="busy" accept="image/*"></b-form-file>
        </b-input-group>
      </b-form-group>

      <div class="d-flex justify-content-center">
         <b-button ref="submit" type="submit" :disabled="busy">Submit</b-button>
      </div>

      <b-overlay :show="busy" no-wrap @shown="onShown" @hidden="onHidden">
        <template #overlay>
          <div v-if="processing" class="text-center p-4 bg-primary text-light rounded">
            <b-icon icon="cloud-upload" font-scale="4"></b-icon>
            <div class="mb-3">Processing...</div>
            <b-progress
              min="1"
              max="20"
              :value="counter"
              variant="success"
              height="3px"
              class="mx-n4 rounded-0"
            ></b-progress>
          </div>
          <div
            v-else
            ref="dialog"
            tabindex="-1"
            role="dialog"
            aria-modal="false"
            aria-labelledby="form-confirm-label"
            class="text-center p-3"
          >
            <p><strong id="form-confirm-label">Are you sure?</strong></p>
            <div class="d-flex">
              <b-button variant="outline-danger" class="mr-3" @click="onCancel">
                Cancel
              </b-button>
              <b-button variant="outline-success" @click="onOK">OK</b-button>
            </div>
          </div>
        </template>
      </b-overlay>
    </b-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        busy: false,
        processing: false,
        counter: 1,
        interval: null
      }
    },
    beforeDestroy() {
      this.clearInterval()
    },
    methods: {
      clearInterval() {
        if (this.interval) {
          clearInterval(this.interval)
          this.interval = null
        }
      },
      onShown() {
        // Focus the dialog prompt
        this.$refs.dialog.focus()
      },
      onHidden() {
        // In this case, we return focus to the submit button
        // You may need to alter this based on your application requirements
        this.$refs.submit.focus()
      },
      onSubmit() {
        this.processing = false
        this.busy = true
      },
      onCancel() {
        this.busy = false
      },
      onOK() {
        this.counter = 1
        this.processing = true
        // Simulate an async request
        this.clearInterval()
        this.interval = setInterval(() => {
          if (this.counter < 20) {
            this.counter = this.counter + 1
          } else {
            this.clearInterval()
            this.$nextTick(() => {
              this.busy = this.processing = false
            })
          }
        }, 350)
      }
    }
  }
</script>

<!-- b-overlay-example-form.vue -->

モーダルボディにはposition: relative;が設定されているため、モーダルボディ内で<b-overlay no-wrap ...>を使用すると、モーダルボディのみが隠蔽されます。モーダル全体（ヘッダーとフッターを含む）を隠蔽する場合は、<b-modal>プロパティbody-classをposition-staticに設定し、<b-overlay>にroundedプロパティを設定する必要があります。

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

`<b-overlay>`

v2.7.0+

ソースを表示

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

プロパティ

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

プロパティ（昇順で並べ替えるにはクリックしてください）	タイプ（昇順で並べ替えるにはクリックしてください）	デフォルト	説明
`bg-color`	`文字列`		不透明なオーバーレイ背景色として使用するCSSカラー。設定されている場合、`variant`プロパティをオーバーライドします。
`blur`	`文字列`	`'2px'`	CSS blur backdrop-filterの値。CSS単位を含めるようにしてください。IE 11ではサポートされていません。ブラーを無効にするには、nullまたは空の文字列に設定します。
`fixed`	`ブール値`	`false`	プロパティ`no-wrap`が設定されている場合、絶対位置ではなく固定位置を使用します。アプリケーションページ全体を隠蔽する場合に便利です。
`no-center`	`ブール値`	`false`	設定すると、オーバーレイコンテンツの垂直および水平方向の中央揃えが無効になります。
`no-fade`	`ブール値`	`false`	オーバーレイのフェードトランジションを無効にします。
`no-wrap`	`ブール値`	`false`	ラッパー要素の生成を無効にし、デフォルトのスロットを無視します。`<b-overlay>`を、position relativeが設定された要素に配置する必要があります。
`opacity`	`数値`または`文字列`	`0.85`	オーバーレイ背景の不透明度。有効な範囲は`0`〜`1`です。
`overlay-tag`	`文字列`	`'div'`	オーバーレイ要素として使用する要素タグ。
`rounded`	`ブール値`または`文字列`	`false`	コンテンツのルーティングに合わせてオーバーレイに丸めを適用します。有効な値は`true`、`'sm'`、`lg`、`circle`、`pill`、`top`、`right`、`bottom`、または`left`です。
`show`	`ブール値`	`false`	設定すると、オーバーレイが表示されます。
`spinner-small`	`ブール値`	`false`	設定すると、デフォルトのスピナーが小さいサイズでレンダリングされます。
`spinner-type`	`文字列`	`'border'`	表示するデフォルトのスピナーのタイプ。現在サポートされているタイプは、'border'と'grow'です。
`spinner-variant`	`文字列`		デフォルトのスピナーにBootstrapテーマカラーバリアントの1つを適用します。デフォルトでは現在のフォントカラーを使用します。
`variant`	`文字列`	`'light'`	オーバーレイ背景に使用する背景テーマカラーバリアント。
`wrap-tag`	`文字列`	`'div'`	全体的なラッパー要素に使用する要素タグ。プロパティ`no-wrap`が設定されている場合は効果がありません。
`z-index`	`数値`または`文字列`	`10`	オーバーレイに適用するZ-index値。コンテンツや配置に合わせてこの値を大きくする必要がある場合があります。

スロット

名前	スコープ	説明
`default`	いいえ	オーバーレイするコンテンツ。プロパティ`no-wrap`が設定されている場合、デフォルトのスロットは無視されます。
`overlay`		デフォルトのオーバーレイスピナーを置き換えるカスタムコンテンツ

イベント

イベント	引数	説明
`click` v2.13.0+	`event` - ネイティブクリックイベントオブジェクト	オーバーレイがクリックされたときに発行されます。
`hidden`		オーバーレイが非表示になったときに発行されます。
`shown`		オーバーレイが表示されたときに発行されます。

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

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

コンポーネント	名前付きエクスポート	インポートパス
`<b-overlay>`	`BOverlay`	`bootstrap-vue`

例

import { BOverlay } from 'bootstrap-vue'
Vue.component('b-overlay', BOverlay)

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

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

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

例

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

概要