警示

以僅有的幾個彈性又容易取得的警示訊息，為典型的使用者動作提供合適的回饋訊息。

簡介

警示訊息的長度可以是任何長度，也可以選擇性地增加一個關閉按鈕（也可選擇自動關閉）。

<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 prop 來控制警示訊息的可見狀態。預設警示訊息不會顯示。設定 show prop 來明確顯示它們。

show prop 接受布林值 true 或 false 分別顯示或隱藏警示訊息。它也可以設定成正整數（表示秒數）來建立一個自動消失的警示訊息。詳情請參閱下列的自動消失警示訊息區段。

`v-model` 支援

你可以使用 v-model 指令在 show prop 上建立雙向資料繫結，如同上方的 v-model="showDismissibleAlert"。當你使用可關閉功能時這很有用，因為當使用者關閉警示訊息時，你的變數會被更新。當使用 v-model 時，請勿使用 show prop。

內容變形

為了適當地使用 <b-alert>，請使用四個必要的內容變形之一，方法是將 variant prop 設定為下列其中之一：info、success、warning 或 danger。預設為 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 -->

傳達輔助技術的意義

僅使用 color 變體來新增意義，將只提供視覺上的指示，輔助科技使用者（例如螢幕閱讀程式）將無法得知。請務必確保以顏色標示的資訊，其內容本身就是顯而易見的（例如可見文字），或透過其他方式包含，例如以.sr-only類別隱藏的附加文字。

快訊中的附加內容

<b-alerts>也能包含標題和段落等其他 HTML 元素，這些元素的樣式會符合 variant 的顏色。

<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 -->

可關閉的快訊

使用dismissibleprop，可以在同一頁面上關閉任何<b-alert>。這樣做會新增一個關閉的X按鈕。使用dismiss-labelprop，來變更與關閉按鈕關聯的隱藏標籤文字。

<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>，請將showprop （或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 -->

淡出快訊

使用fadeprop，來啟用動畫。預設情況下，快訊沒有動畫。

<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`	如果設定為 true，將啟用關閉按鈕
`fade`	`布林值`	`false`	設定為 `true` 時，將在組件上啟用漸變動畫/轉場
`show` v-model	`Boolean`或`Number`或`String`	`false`	如果設定的話，將會顯示快訊。設定為數字（秒數），幾秒鐘後自動顯示和關閉快訊
`variant`	`字串`	`'info'`	將 Bootstrap 主題色變體之一應用到組件

`v-model`

屬性	事件
`show`	`input`

插槽

名稱	說明
`dismiss`	放棄按鈕的內容
`預設`	置於警報中的內容

事件

事件	引數	說明
`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)

簡介