Bootstrapでトースト通知(Toasts)(通知バナー)を作る方法
Bootstrapでトースト通知(Toasts)(通知バナー)を作る方法
デモ
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Bootstrap Toasts demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- アイコンのCDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<!-- JSファイル読み込み -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div><h4>サンプル1(ベーシック)</h4></div>
<div style="background-color:grey;padding:10px;height:125px">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" >
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%" height="100%" fill="#007aff"/>
</svg>
<strong class="me-auto">サンプル1</strong>
<small>11 分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
</div>
<div class="toast-body">
トースト通知メッセージ(ベーシック)
</div>
</div>
</div>
<script type="text/javascript">
var option = {autohide: false};
var toastElList = [].slice.call(document.querySelectorAll(".toast"));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option);
});
/* トースト表示 */
toastList[0].show();
</script>
</div><!-- row -->
<div class="row">
<div><h4>サンプル2(ライブ)</h4></div>
<div>
<button type="button" class="btn btn-primary" id="liveToastBtn" onclick="showToast2();">
トースト表示
</button>
<button type="button" class="btn btn-primary" id="liveToastBtn" onclick="hideToast2();">
トースト非表示
</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div
id="liveToast"
class="toast hide"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="toast-header">
<i class="bi bi-info-circle-fill" style="font-size:20px;margin-right:10px;color:blue;"></i>
<strong class="me-auto">サンプル2</strong>
<small>20 分前</small>
<button
type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="閉じる"
></button>
</div>
<div class="toast-body">トースト通知メッセージ(ライブ)</div>
</div>
</div>
</div>
<script type="text/javascript">
var options2 = null;
var exampleEl2 = document.getElementById('liveToast');
var toast2 = new bootstrap.Toast(exampleEl2, options2);
/* トースト表示 */
showToast2();
function showToast2() {
toast2.show();
}
function hideToast2() {
toast2.hide();
}
</script>
</div><!-- row -->
<div class="row">
<div><h4>サンプル3(jQuery)</h4></div>
<div>
<button type="button" class="btn btn-primary" id="liveToastBtn" onclick="showToast3();">
トースト表示
</button>
<button type="button" class="btn btn-primary" id="liveToastBtn" onclick="hideToast3();">
トースト非表示
</button>
</div>
<div style="background-color:red;;padding:10px;height:125px">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example3" data-bs-delay="10000">
<div class="toast-header">
<i class="bi bi-check-circle-fill" style="font-size:20px;margin-right:10px;color:green;"></i>
<strong class="me-auto">サンプル3</strong>
<button type="button" class="btn-secondary btn-sm" data-bs-dismiss="toast" >閉じる</button>
</div>
<div class="toast-body">
トースト通知メッセージ(jQuery)
</div>
</div>
</div>
<!-- jQueryを利用するのでjQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
function showToast3() {
$('#example3').toast('show');;
}
function hideToast3() {
$('#example3').toast('hide');;
}
</script>
</div><!-- row -->
<div class="row">
<div><a name="example4"></a><h4>サンプル4(配置)</h4></div>
<div class="mb-3">
<label for="selectToastPlacement">トースト配置位置を選択してください</label>
<select class="form-select mt-2" id="selectToastPlacement" onchange="onSelectToastPlacementChanged();">
<option value="" selected>位置を選択してください...</option>
<option value="top-0 start-0">上部左側</option>
<option value="top-0 start-50 translate-middle-x">上部中央</option>
<option value="top-0 end-0">上部右側</option>
<option value="top-50 start-0 translate-middle-y">中部左側</option>
<option value="top-50 start-50 translate-middle">中部中央</option>
<option value="top-50 end-0 translate-middle-y">中部右側</option>
<option value="bottom-0 start-0">下部左側</option>
<option value="bottom-0 start-50 translate-middle-x">下部中央</option>
<option value="bottom-0 end-0">下部右側</option>
</select>
</div>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3 position-fixed" id="toastPlacement">
<div class="toast" id="example4" data-bs-autohide="false">
<div class="toast-header">
<i class="bi bi-exclamation-triangle-fill" style="font-size:20px;margin-right:10px;color:#ffc107;"></i>
<strong class="me-auto">サンプル4</strong>
<small>11分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
</div>
<div class="toast-body">
トースト通知メッセージ(配置)
</div>
</div>
</div>
</div>
<!-- jQueryを利用するのでjQueryを読み込む -->
<script type="text/javascript">
var position = '';
function onSelectToastPlacementChanged() {
if ( position != "" ) $('#toastPlacement').removeClass(position);
$('#sampleHTML').html('');
position = $('#selectToastPlacement').val();
if ( position != "" ) $('#toastPlacement').addClass(position);
if ( position != "" ) {
$('#sampleHTML').html(editHTML(position));
showToast4();
} else {
hideToast4();
}
}
function showToast4() {
$('#example4').toast('show');
}
function hideToast4() {
$('#example4').toast('hide');;
}
function editHTML(className) {
var HtmlString = '';
HtmlString = HtmlString + "<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">\n";
HtmlString = HtmlString + " <div class="toast-container position-absolute p-3 position-fixed <strong><span style='font-size:18px'>#</span></strong>" id="toastPlacement">\n";
HtmlString = HtmlString + " <div class="toast" id="example4" data-bs-autohide="false">\n";
HtmlString = HtmlString + " <div class="toast-header">\n";
HtmlString = HtmlString + " ...\n";
HtmlString = HtmlString + " </div>\n";
HtmlString = HtmlString + " <div class="toast-body">\n";
HtmlString = HtmlString + " ...\n";
HtmlString = HtmlString + " </div>\n";
HtmlString = HtmlString + " </div>\n";
HtmlString = HtmlString + " </div>\n";
HtmlString = HtmlString + "</div>\n";
HtmlString = HtmlString.replace("#",className);
return HtmlString;
}
</script>
</div><!-- row -->
<div class="row">
<div class="col-12"><div id="sampleHTML" style="white-space: pre;border: 1px solid;height:300px;"></div></div>
</div>
<div class="row">
<div><a name="example5"></a><h4>サンプル5(カラー)</h4></div>
<div class="toast-container"><!-- 複数のトーストを縦に並べる -->
<div class="toast align-items-center text-white bg-primary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-primary
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-secondary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-secondary
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-success border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-success
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-info border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-info
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-warning border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-warning
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-danger border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-danger
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center bg-light border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-light
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-dark border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-dark
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div> <!-- toast-container -->
<script type="text/javascript">
var option5 = {autohide: false};
var toastElList5 = [].slice.call(document.querySelectorAll(".color"));
var toastList5 = toastElList5.map(function (toastEl5) {
return new bootstrap.Toast(toastEl5, option5);
});
toastList5.forEach(showToast);
function showToast(item, index, arr) {
item.show();
}
</script>
</div><!-- row -->
</div><!-- container -->
<div style="height:500px;"></div>
</body>
</html>
実装方法
Bootstrap導入
まず、BootstrapのCSSファイルとJSファイルを読み込みます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
導入方法の詳細は、以下のページをご覧ください。
トースト領域生成
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example1">
...
</div>
まずトースト領域としてDIV領域を生成し、classに「toast」を設定してください。
トースト初期化
次に生成したトースト領域をターゲットにtoastを初期化します。
Javascriptの場合
<script type="text/javascript">
var options = null;
var exampleEl = document.getElementById('example1');
var toast = new bootstrap.Toast(exampleEl, options);
</script>
トースト領域のオブジェクトを取得、それに対してトーストを初期化してください。
トースト表示
最後にshow()メソッドを実行し、トーストを表示させます。
Javascriptの場合
<script type="text/javascript">
var options = null;
var exampleEl = document.getElementById('example1');
var toast = new bootstrap.Toast(exampleEl, options);
toast.show();
</script>
jQueryの場合
<script type="text/javascript">
function showToast() {
$('#example1').toast('show');;
}
</script>
自動非表示を無効化
デフォルトではトーストは自動的に非表示になりますが、オプション「autohide」に『false』を指定すると、非表示が無効化され、ずっと表示されたままになります。
Javascriptの場合
<script type="text/javascript">
var options = {autohide: false};
var exampleEl = document.getElementById('example1');
var toast = new bootstrap.Toast(exampleEl, options);
</script>
HTMLタグ属性の場合
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
...
</div>
閉じるボタン実装
トーストを閉じる場合には、ボタンやリンクなどを設置し、そのオブジェクトに属性「data-bs-dismiss」、その値に『toast』を設定してください。
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-secondary btn-sm" data-bs-dismiss="toast" >閉じる</button>
複数トーストを縦に並べるには
複数のトーストを同時に表示させる場合、縦に並べたほうが見やすくなります。そのように表示させるには、両トーストを格納するDIV領域を作成し、class「toast-container」を設定してください。
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>
</div>
トースト表示位置
<div class="toast-container position-absolute p-3 position-fixed bottom-0 end-0" style="z-index: 5">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example1">
...
</div>
</div>
トーストを画面右下に表示する場合のコードが上になります。
まず、表示位置固定としてclass「position-fixed」を指定してください。これを指定することで、画面の右下などに位置が移動されます。これがないと、コードを書いた位置にトーストが表示されることになります。
次にclass「bottom-0」を指定することで表示領域の0地点、つまり、一番下に表示されるます。
そして「end-0」というのは最終地点、つまり、領域の一番右に表示させるクラスになり、両クラスを指定することで、画面右下に表示される、ということになります。
トースト表示位置クラス一覧
左上 | top-0 start-0 |
上部中央 | top-0 start-50 translate-middle-x |
右上 | top-0 end-0 |
左側中央 | top-50 start-0 translate-middle-y |
中央 | top-50 start-50 translate-middle |
右側中央 | top-50 end-0 translate-middle-y |
左下 | bottom-0 start-0 |
下部中央 | bottom-0 start-50 translate-middle-x |
右下 | bottom-0 end-0 |
カラースキーム
Bootstrapの color と backgroundを利用することで、トーストのカラーを変更することができます。
<div class="toast align-items-center text-white bg-primary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
bg-primary
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
「bg-primary」を使ったトーストのコードが上になります。
「bg-primary」を使うことで、背景が青いトーストとなります。
ただし、文字が黒いままだと読みづらいので文字を白くするために「text-white」クラスを同時に設定しています。
オプション
オプションはJavascriptで初期化する際に指定できると同時に、また、属性に、 『data-bs-(オプション名)=(値)』を設定することで指定できます。
animation
『true』を設定すると、トースト表示時、フェードの効果を付けて“じんわり”表示されるようになります。
デフォルトは『true』です。
autohide
『false』を設定すると、表示されたトーストが自動で非表示にはならず、ずっと表示された状態になります。
デフォルトは『true』で自動的に非表示になります。
delay
トーストの表示時間をミリ秒単位で指定できるオプションです。
デフォルトは『5000』(5秒)です。