トースト

軽量で簡単にカスタマイズできるアラートメッセージをプッシュ通知します。

Toasts は、モバイルやデスクトップの OS で普及しているプッシュ通知を模倣して設計された軽量な通知です。

flexbox で作られているので、位置合わせや配置が簡単です。

Overview

Toasts は autohide: false を指定しないと自動的に非表示になります。

Examples

Basic

Toasts の拡張性と予測可能性を高めるために、ヘッダと本文を推奨します。

Toasts のヘッダは display: flex を使用しており、 margin と flexbox ユーティリティによりコンテンツを簡単に整列させることができます。

Toasts は必要なマークアップはほとんどありません。

最低限、“Toasts” コンテンツを含む要素を 1 つだけ必要とし、Dismiss ボタンを強く推奨します。

tip

以前は、toastを完全に隠すために、スクリプトが動的にhide属性を追加していました（単にopacity:0ではなく、display:noneで）。これはもう必要ありません。しかし、後方互換性のために、私たちのスクリプトは、次のメジャーバージョンまで、（実際には必要ないにもかかわらず）クラスをトグルし続けます。

vue
<template>
 <Toast show>
  <ToastHeader>
   <b-img
    src="https://dummyimage.com/20x20/007aff/007aff"
    rounded
    margin="e-2"
    alt="Card image cap"
   />
   <strong class="me-auto">Bootstrap</strong>
   <small>11 mins ago</small>
   <CloseButton dismiss="toast" />
  </ToastHeader>
  <ToastBody>Hello, world! This is a toast message.</ToastBody>
 </Toast>
</template>

Live example

下のボタンをクリックして、デフォルトで hide 属性で非表示になっているトースト（ユーティリティで右下隅に配置）を表示します。

vue
<template>
 <b-button
  color="primary"
  toggle="toast"
  target="#liveToast"
 >
  Show live toast
 </b-button>

 <div
  class="position-fixed bottom-0 end-0 p-3"
  style="z-index: 11"
 >
  <Toast id="liveToast">
   <ToastHeader>
    <b-img
     src="https://dummyimage.com/20x20/007aff/007aff"
     rounded
     margin="e-2"
     alt="Card image cap"
    />
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <CloseButton dismiss="toast" />
   </ToastHeader>
   <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
 </div>
</template>

Translucent

Toasts は半透明なので、上に表示されるものは何でも溶け込みます。

vue
<template>
 <Toast show>
  <ToastHeader>
   <b-img
    src="https://dummyimage.com/20x20/007aff/007aff"
    rounded
    margin="e-2"
    alt="Card image cap"
   />
   <strong class="me-auto">Bootstrap</strong>
   <small text-color="body-secondary">11 mins ago</small>
   <CloseButton dismiss="toast" />
  </ToastHeader>
  <ToastBody>Hello, world! This is a toast message.</ToastBody>
 </Toast>
</template>

Stacking

Toast が複数ある場合は、読みやすいように縦に重ねるのがデフォルトになっています。

vue
<template>
 <ToastContainer position="static">
  <Toast show>
   <ToastHeader>
    <b-img
     src="https://dummyimage.com/20x20/007aff/007aff"
     rounded
     margin="e-2"
     alt="Card image cap"
    />
    <strong class="me-auto">Bootstrap</strong>
    <small text-color="body-secondary">just now</small>
    <CloseButton dismiss="toast" />
   </ToastHeader>
   <ToastBody>See? Just like this.</ToastBody>
  </Toast>
  <Toast show>
   <ToastHeader>
    <b-img
     src="https://dummyimage.com/20x20/007aff/007aff"
     rounded
     margin="e-2"
     alt="Card image cap"
    />
    <strong class="me-auto">Bootstrap</strong>
    <small text-color="body-secondary">2 seconds ago</small>
    <CloseButton dismiss="toast" />
   </ToastHeader>
   <ToastBody>Heads up, toasts will stack automatically</ToastBody>
  </Toast>
 </ToastContainer>
</template>

Custom content

サブコンポーネントを削除したり、utilities を使って調整したり、独自のマークアップを追加したりして、トーストをカスタマイズできます。

ここでは、デフォルトの ToastHeader コンポーネントを削除し、Bootstrap Iconsからカスタムの非表示アイコンを追加し、 flexbox utilities を使ってレイアウトを調整することで、よりシンプルなトーストを作成しています。

vue
<template>
 <Toast show>
  <b-div flex>
   <ToastBody>Hello, world! This is a toast message.</ToastBody>
   <CloseButton
    dismiss="toast"
    margin="e-2 auto"
   />
  </b-div>
 </Toast>
</template>

また、toastsにコントロールやコンポーネントを追加することも可能です。

vue
<template>
 <Toast show>
  <ToastBody>
   Hello, world! This is a toast message.
   <b-div
    margin="t-2"
    padding="t-2"
    border="top"
   >
    <b-button
     color="primary"
     size="sm"
    >
     Take action
    </b-button>
    <b-button
     color="secondary"
     size="sm"
     dismiss="toast"
    >
     Close
    </b-button>
   </b-div>
  </ToastBody>
 </Toast>
</template>

Color schemes

上記の例に基づいて、 color と background ユーティリティを使用して、さまざまなトーストのカラースキームを作成することができます。

ここでは、Toast コンポーネントに .bg-primary と text-color="white" 属性を追加しています。

鮮明なエッジを出すために、border="0" 属性でデフォルトのボーダーを削除しています。

vue
<template>
 <Toast
  show
  text-color="white"
  background-color="primary"
  border="0"
 >
  <b-div flex>
   <ToastBody>Hello, world! This is a toast message.</ToastBody>
   <CloseButton
    dismiss="toast"
    margin="e-2 auto"
   />
  </b-div>
 </Toast>
</template>

Placement

必要に応じてカスタム CSS で配置します。右上は通知によく使用されます。

一度に 1 つの Toast しか表示しない場合は、配置スタイルを Toast コンポーネントに配置してください。

vue
<template>
 <BForm>
  <b-div margin="b-3">
   <b-label for="selectToastPlacement">
    Toast placement
   </b-label>
   <BFormSelect id="selectToastPlacement">
    <option
     value
     selected
    >
     Select a position...
    </option>
    <option value="top-0 start-0">
     Top left
    </option>
    <option value="top-0 start-50 translate-middle-x">
     Top center
    </option>
    <option value="top-0 end-0">
     Top right
    </option>
    <option value="top-50 start-0 translate-middle-y">
     Middle left
    </option>
    <option value="top-50 start-50 translate-middle">
     Middle center
    </option>
    <option value="top-50 end-0 translate-middle-y">
     Middle right
    </option>
    <option value="bottom-0 start-0">
     Bottom left
    </option>
    <option value="bottom-0 start-50 translate-middle-x">
     Bottom center
    </option>
    <option value="bottom-0 end-0">
     Bottom right
    </option>
   </BFormSelect>
  </b-div>
 </BForm>
 <b-div
  aria-live="polite"
  aria-atomic="true"
  background-color="body-secondary"
  position="relative"
  class="bd-example-toasts"
 >
  <ToastContainer padding="3">
   <Toast show>
    <ToastHeader>
     <b-img
      src="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <strong class="me-auto">Bootstrap</strong>
     <small>11 mins ago</small>
    </ToastHeader>
    <ToastBody>Hello, world! This is a toast message.</ToastBody>
   </Toast>
  </ToastContainer>
 </b-div>
</template>

多くの通知を生成するシステムでは、簡単にスタックできるようにラッピング要素を使用することを検討してください。

vue
<template>
 <b-div
  aria-live="polite"
  aria-atomic="true"
  position="relative"
 >
  <ToastContainer
   padding="3"
   top="0"
   end="0"
  >
   <Toast show>
    <ToastHeader>
     <b-img
      src="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <strong class="me-auto">Bootstrap</strong>
     <small text-corlor="body-secondary">just now</small>
    </ToastHeader>
    <ToastBody>See? Just like this.</ToastBody>
   </Toast>
   <Toast show>
    <ToastHeader>
     <b-img
      src="/img/logo/icon1.svg"
      rounded="start"
      margin="e-2"
      width="20"
     />
     <strong class="me-auto">Bootstrap</strong>
     <small text-corlor="body-secondary">2 seconds ago</small>
    </ToastHeader>
    <ToastBody>Heads up, toasts will stack automatically</ToastBody>
   </Toast>
  </ToastContainer>
 </b-div>
</template>

flexbox ユーティリティを使って、Toast を水平方向や垂直方向に整列させることもできます。

vue
<template>
 <b-div
  aria-live="polite"
  aria-atomic="true"
  flex
  justify-content="center"
  align-items="center"
  relative-width="100"
 >
  <Toast show>
   <ToastHeader>
    <b-img
     src="/img/logo/icon1.svg"
     rounded="start"
     margin="e-2"
     width="20"
    />
    <strong class="me-auto">Bootstrap</strong>
    <small text-corlor="body-secondary">11 mins ago</small>
   </ToastHeader>
   <ToastBody>Hello, world! This is a toast message.</ToastBody>
  </Toast>
 </b-div>
</template>
vue
<template>
 <Toast
  show
  autohide="false"
 >
  <ToastHeader>
   <b-img
    src="/img/logo/icon1.svg"
    rounded="start"
    margin="e-2"
    width="20"
   />
   <strong class="me-auto">Bootstrap</strong>
   <small text-corlor="body-secondary">11 mins ago</small>
   <CloseButton dismiss="toast" />
  </ToastHeader>
  <ToastBody>Hello, world! This is a toast message.</ToastBody>
 </Toast>
</template>

技術的には、Toast の中にフォーカスやアクションが可能なコントロール（追加のボタンやリンクなど）を追加することは可能ですが、自動非表示の Toast ではこれを避けるべきです。

Toast に長い delay timeout を与えたとしても、キーボードや支援技術のユーザーが行動を起こすために Toast にたどり着くのは難しいかもしれません（ Toast は表示された時点ではフォーカスを受けないため）。

コントロールが必要な場合は、autohide: false のトーストを使用することをお勧めします。