bootstrap4でToast(トースト)を使ってみる

bootstrap4でToast(トースト)を使ってみる
準備
1. CDNで使う準備
2. ダウンロードして使う準備
使い方
サンプルソース
1. html
2. javascript
おわりに

bootstrap4でToast(トースト)を使ってみる

bootstrap4でtoastの使い方などをまとめてみました。

公式のリンクはこちら

準備

CDNで使う準備

CDNを使う場合はbootstrapのトップページにある、CDNのパスをそれぞれ読み込んで使います。

toastはjavascriptを使うので, jquery, popper, bootstrap.jsをそれぞれ読み込みます。

他のライブラリも同様ですが、読み込み順が違うと動かなかったりするので注意が必要です。

<!-- CSS 読み込み -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- jquery, popper, bootstrapjs読み込み -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

ダウンロードして使う準備

下記の方法で可能です。
・こちらからbootstrapのcssとjsをダウンロードして、それぞれリンクする
・jqueryとpopperjsはcdnのリンクからソースを表示して保存してリンクする

こういう構成だった場合

▾ bootstrap/                   
    bootstrap.min.css          
    bootstrap.min.js           
  jquery-3.5.1.min.js          
  popper.js             

  index.html => 呼び出すhtml

index.htmlでは下記のように読み込むと使えます。
bootstrapは4.5のバージョンで試しています。

<head>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">

  <script src="./jquery-3.5.1.min.js"></script>
  <script src="./popper.js"></script>
  <script src="./bootstrap/bootstrap.min.js"></script>
</head>

使い方

それぞれのリソースを読み込んだ後は下記の方法で使えます。

toastの設定

toastが設定してあるhtmlを要素をセレクターで指定して、オブジェクトを渡すと設定できます。

$('.toast').toast({animation:true, autohide: true, delay:3000});

設定項目は下記です。

{
  animation:true,
  autohide: true,
  delay:3000
}

animation

アニメーションをつけるかどうかを設定します。trueまたはfalseです。

autohide

自動で閉じるかどうかを設定します。trueまたはfalseです。

delay

自動で閉じる場合のスピードをミリ秒で設定します。
autohideがtrueじゃない場合は気にしなくて良いです。

toastの表示

任意のタイミングでshowを呼ぶと表示されます。

$('.toast').toast('show');

toastの非表示

任意のタイミングでhideを呼ぶと非表示になります。

$('.toast').toast('hide');

サンプルソース

See the Pen
bootstrap toast test1 by yasuaki (@include777)
on CodePen.

html

<div class="container mt-3">

  <div aria-live="polite" aria-atomic="true" style="position: relative;">
    <div style="position: absolute; top: 0; right: 0; width:20em;">
      <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
        <div class="toast-header">
          <strong class="mr-auto">codelike toast</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="toast-body">
          hello, codelike toast test!
        </div>
      </div>
    </div>
  </div>

  <div class="btn btn-primary" id="show1">
    show toast
  </div>

  <div class="btn btn-danger" id="hide1">
    hide toast
  </div>
</div>

3〜18行目で表示するtoastを作成しています。
表示位置は自分で配置しないといけないようなので、positionをabsoluteで右上になるようにしています。

トーストをclass=”toast”で囲んで、toast-headerに上部に出したい内容、toast-bodyに下部に出したい内容を書きます。

後は表示ボタン(20〜22行目)と非表示ボタン(24〜26行目)を用意しました。
表示を押すと、showで表示され、非表示だとhideで非表示になります。

javascript

$(function () {
  $('.toast').toast({animation:true, autohide: true, delay:3000});

  $("#show1").on("click", function () {
    $(".toast").toast("show");
  });

  $("#hide1").on("click", function () {
    $(".toast").toast("hide");
  });
});

toastの初期化をロード時にするようにして、アニメーションON、自動非表示ONの3秒後に設定しています。
それぞれのボタンが押された場合に、toastの表示と非表示をしてみています。