アラート

一般的なユーザー操作に対して、利用可能な柔軟なアラートメッセージを使用して、コンテキストに応じたフィードバックメッセージを提供します。

概要

アラートは、任意の長さのテキストと、オプションの閉じるボタン（およびオプションの自動消去）で使用できます。

<template>
  <div>
    <b-alert show>Default Alert</b-alert>

    <b-alert variant="success" show>Success Alert</b-alert>

    <b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
      Dismissible Alert!
    </b-alert>

    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
    >
      <p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
      <b-progress
        variant="warning"
        :max="dismissSecs"
        :value="dismissCountDown"
        height="4px"
      ></b-progress>
    </b-alert>

    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 10,
        dismissCountDown: 0,
        showDismissibleAlert: false
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert.vue -->

表示状態

show プロパティを使用して、アラートの表示状態を制御します。デフォルトでは、アラートは表示され**ません**。show プロパティを明示的に設定して表示します。

show プロパティは、ブール値の true または false を使用して、それぞれアラートを表示または非表示にします。また、正の整数（秒を表す）に設定して、自動的に消えるアラートを作成することもできます。詳細は、以下の自動消去アラートセクションを参照してください。

`v-model` サポート

上記の v-model="showDismissibleAlert" のように、v-model ディレクティブを使用して、show プロパティに双方向データバインディングを作成できます。ユーザーがアラートを閉じると変数が更新されるため、閉じるボタン付きアラートを使用する場合に便利です。v-model を使用する場合、show プロパティは使用しないでください。

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

<b-alert> を適切にスタイル設定するには、variant プロパティを info、success、warning、danger のいずれかに設定して、4 つの必須コンテキストバリアントのいずれかを使用します。デフォルトは info です。

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

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

支援技術への意味の伝達

色のバリエーションを使用して意味を追加すると、視覚的な表示のみが提供され、スクリーンリーダーなどの支援技術のユーザーには伝わりません。色で示される情報は、コンテンツ自体（表示されるテキストなど）から明らかであるか、.sr-only クラスで非表示にされた追加テキストなど、別の方法で含まれていることを確認してください。

アラート内の追加コンテンツ

<b-alerts> には見出しや段落などの追加のHTML要素を含めることもでき、バリアントに一致する適切な色でスタイル設定されます。

<div>
  <b-alert show variant="success">
    <h4 class="alert-heading">Well done!</h4>
    <p>
      Aww yeah, you successfully read this important alert message. This example text is going to
      run a bit longer so that you can see how spacing within an alert works with this kind of
      content.
    </p>
    <hr>
    <p class="mb-0">
      Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
    </p>
  </b-alert>
</div>

<!-- b-alert-content.vue -->

アラート内のリンクの色

.alert-link ユーティリティCSSクラスを使用して、アラート内に一致する色のリンクをすばやく提供します。<a> または <b-link> で使用します。

<div>
  <b-alert show variant="primary"><a href="#" class="alert-link">Primary Alert</a></b-alert>
  <b-alert show variant="secondary"><a href="#" class="alert-link">Secondary Alert</a></b-alert>
  <b-alert show variant="success"><a href="#" class="alert-link">Success Alert</a></b-alert>
  <b-alert show variant="danger"><a href="#" class="alert-link">Danger Alert</a></b-alert>
  <b-alert show variant="warning"><a href="#" class="alert-link">Warning Alert</a></b-alert>
  <b-alert show variant="info"><a href="#" class="alert-link">Info Alert</a></b-alert>
  <b-alert show variant="light"><a href="#" class="alert-link">Light Alert</a></b-alert>
  <b-alert show variant="dark"><a href="#" class="alert-link">Dark Alert</a></b-alert>
</div>

<!-- b-alert-links.vue -->

閉じるボタン付きアラート

dismissible プロパティを使用すると、任意の <b-alert> をインラインで閉じることができます。これにより、閉じる X ボタンが追加されます。dismiss-label プロパティを使用して、閉じるボタンに関連付けられた非表示のラベルテキストを変更します。

<div>
  <b-alert show dismissible>
    Dismissible Alert! Click the close button over there <b>&rArr;</b>
  </b-alert>
</div>

<!-- b-alert-dismiss.vue -->

自動消去アラート

一定時間後に自動的に消える <b-alert> を作成するには、show プロパティ（または v-model）に、<b-alert> を表示する秒数を設定します。整数秒数のみがサポートされています。

<template>
  <div>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
    >
      This alert will dismiss after {{ dismissCountDown }} seconds...
    </b-alert>
    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 5,
        dismissCountDown: 0
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert-auto-dismissing.vue -->

フェードアラート

fade プロパティを使用してアニメーションを有効にします。デフォルトでは、アラートはアニメーション化されません。

<template>
  <div>
    <b-alert show dismissible fade>Dismissible Alert!</b-alert>

    <b-alert
      variant="danger"
      dismissible
      fade
      :show="showDismissibleAlert"
      @dismissed="showDismissibleAlert=false"
    >
      Dismissible Alert!
    </b-alert>

    <b-alert
      :show="dismissCountDown"
      dismissible
      fade
      variant="warning"
      @dismiss-count-down="countDownChanged"
    >
      This alert will dismiss after {{ dismissCountDown }} seconds...
    </b-alert>

    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dismissSecs: 5,
        dismissCountDown: 0,
        showDismissibleAlert: false
      }
    },
    methods: {
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      }
    }
  }
</script>

<!-- b-alert-fade.vue -->

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

`<b-alert>`

ソースを表示

<b-alert> プロパティ
<b-alert> v-model
<b-alert> スロット
<b-alert> イベント

プロパティ

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

プロパティ	タイプ	デフォルト	説明
`dismiss-label`	`文字列`	`'閉じる'`	閉じるボタンの 'aria-label' 属性の値
`dismissible`	`真偽値`	`false`	設定すると、閉じるボタンが有効になります
`fade`	`真偽値`	`false`	`true`に設定すると、コンポーネントのフェードアニメーション/トランジションが有効になります
`show` v-model	`Boolean` または `Number` または `String`	`false`	設定すると、アラートが表示されます。数値（秒）に設定すると、アラートが表示され、指定した秒数後に自動的に閉じます
`variant`	`文字列`	`'info'`	Bootstrapテーマカラーバリアントのいずれかをコンポーネントに適用します

`v-model`

プロパティ	イベント
`show`	`input`

スロット

名前	説明
`dismiss`	閉じるボタンのコンテンツ
`default`	アラートに配置するコンテンツ

イベント

イベント	引数	説明
`dismiss-count-down`	`dismissCountDown` - 閉じるまでの残り時間	showプロパティが数値の場合、このイベントはカウントダウン中に毎秒発生します
`dismissed`		閉じるボタンまたはカウントダウンの期限切れによってアラートが閉じられました
`input`	`show` - アラートのブール値の状態、または現在のカウントダウン値の数値	v-model show 値の更新に使用されます

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

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

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

例

import { BAlert } from 'bootstrap-vue'
Vue.component('b-alert', BAlert)

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

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

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

例

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

概要