敬酒
通過 toast、輕量級且易於自定義的警報消息向您的訪問者推送通知。
Toast 是輕量級通知,旨在模仿移動和桌面操作系統已經普及的推送通知。它們是用 flexbox 構建的,因此它們很容易對齊和定位。
概述
使用 toast 插件時要知道的事情:
- 出於性能原因,Toast 是可選的,因此您必須自己初始化它們。
- 如果你不指定 Toasts 會自動隱藏
autohide: false
。
prefers-reduced-motion
媒體查詢。請參閱
我們可訪問性文檔的減少運動部分。
例子
基本的
為了鼓勵可擴展和可預測的 toast,我們建議使用 header 和 body。Toast headers 使用display: flex
,由於我們的 margin 和 flexbox 實用程序,可以輕鬆對齊內容。
Toast 可以根據您的需要靈活使用,並且所需的標記非常少。至少,我們需要一個元素來包含您的“烤”內容,並強烈建議使用關閉按鈕。
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
居住
單擊下面的按鈕以顯示默認隱藏的 toast(位於右下角的實用程序中).hide
。
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
半透明
吐司略微半透明,可以與下面的東西融為一體。
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
堆疊
您可以通過將吐司包裝在吐司容器中來堆疊吐司,這將垂直增加一些間距。
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
自定義內容
通過刪除子組件、使用實用程序調整它們或添加您自己的標記來自定義您的 toast。在這裡,我們通過刪除 default 創建了一個更簡單的 toast,從Bootstrap Icons.toast-header
添加自定義隱藏圖標,並使用一些flexbox 實用程序來調整佈局。
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
或者,您還可以向 toast 添加其他控件和組件。
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
配色方案
在上述示例的基礎上,您可以使用我們的顏色和背景實用程序創建不同的吐司配色方案。在這裡,我們將.bg-primary
和添加.text-white
到.toast
,然後添加.btn-close-white
到我們的關閉按鈕。對於清晰的邊緣,我們使用 刪除默認邊框.border-0
。
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
放置
根據需要使用自定義 CSS 放置敬酒。右上角通常用於通知,頂部中間也是如此。如果您一次只顯示一個 toast,請將定位樣式放在.toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" 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>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
對於生成更多通知的系統,請考慮使用包裝元素,以便它們可以輕鬆堆疊。
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
您還可以使用 flexbox 實用程序來水平和/或垂直對齊 toast。
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
可訪問性
Toast 旨在對您的訪問者或用戶造成小的干擾,因此為了幫助那些使用屏幕閱讀器和類似輔助技術的人,您應該將 Toast 包裝在一個aria-live
區域中。屏幕閱讀器會自動宣布對活動區域的更改(例如注入/更新 toast 組件),而無需移動用戶的焦點或以其他方式打斷用戶。此外,包括aria-atomic="true"
以確保始終將整個 toast 宣佈為單個(原子)單元,而不是僅僅宣布更改的內容(如果您只更新 toast 的部分內容,或者顯示相同的 toast 內容,這可能會導致問題在稍後的時間點)。如果所需的信息對流程很重要,例如表單中的錯誤列表,則使用警報組件而不是吐司。
請注意,在生成或更新 toast之前,活動區域需要存在於標記中。如果同時動態生成兩者並註入到頁面中,一般不會被輔助技術公佈。
您還需要根據內容調整role
和aria-live
級別。如果它是一條重要消息,例如錯誤,請使用role="alert" aria-live="assertive"
,否則使用role="status" aria-live="polite"
屬性。
隨著���顯示的內容髮生變化,請務必更新delay
超時,以便用戶有足夠的時間閱讀 toast。
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
使用時autohide: false
,您必須添加一個關閉按鈕以允許用戶關閉 toast。
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
雖然從技術上講,可以在 toast 中添加可聚焦/可操作的控件(例如附加按鈕或鏈接),但您應該避免為自動隱藏 toast 執行此操作。即使您讓 toast 長時間delay
超時,鍵盤和輔助技術用戶可能會發現很難及時到達 toast 以採取行動(因為 toast 在顯示時不會獲得焦點)。如果您絕對必須有進一步的控制,我們建議使用帶有autohide: false
.
薩斯
變量
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba(0, 0, 0, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba(0, 0, 0, .05);
用法
通過 JavaScript 初始化 toast:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
選項
選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性,將選項名稱附加到 中data-bs-
,如data-bs-animation=""
.
姓名 | 類型 | 默認 | 描述 |
---|---|---|---|
animation |
布爾值 | true |
對 toast 應用 CSS 淡入淡出過渡 |
autohide |
布爾值 | true |
自動隱藏吐司 |
delay |
數字 | 5000 |
延遲隱藏 toast (ms) |
方法
節目
顯示元素的吐司。在 toast 實際顯示之前(即在事件發生之前)返回給調用者。shown.bs.toast
您必須手動調用此方法,而不是您的 toast 不會顯示。
toast.show()
隱藏
隱藏元素的吐司。在 toast 實際被隱藏之前(即在事件發生之前)返回給調用者。hidden.bs.toast
如果你做了,你必須手動調用這個autohide
方法false
。
toast.hide()
處置
隱藏元素的吐司。您的 toast 將保留在 DOM 上,但不會再顯示。
toast.dispose()
獲取實例
允許您獲取與 DOM 元素關聯的 scrollspy 實例的靜態方法
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
獲取或創建實例
靜態方法,允許您獲取與 DOM 元素關聯的 scrollspy 實例,或創建一個新實例以防它未初始化
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
活動
事件類型 | 描述 |
---|---|
show.bs.toast |
show 調用實例方法時立即觸發此事件。 |
shown.bs.toast |
當 toast 對用戶可見時觸發此事件。 |
hide.bs.toast |
hide 調用實例方法時立即觸發此事件。 |
hidden.bs.toast |
當 toast 完成對用戶隱藏時觸發此事件。 |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})