ขนมปังปิ้ง
ส่งการแจ้งเตือนไปยังผู้เยี่ยมชมของคุณด้วยขนมปังปิ้ง ข้อความเตือนที่มีน้ำหนักเบาและปรับแต่งได้ง่าย
ขนมปังปิ้งเป็นการแจ้งเตือนแบบเบาที่ออกแบบมาเพื่อเลียนแบบการแจ้งเตือนแบบพุชที่ระบบปฏิบัติการมือถือและเดสก์ท็อปได้รับความนิยม สร้างด้วย flexbox จึงสามารถจัดตำแหน่งและจัดตำแหน่งได้ง่าย
ภาพรวม
สิ่งที่ต้องรู้เมื่อใช้ปลั๊กอินขนมปังปิ้ง:
- หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการ
util.js
. - ขนมปังปิ้งเป็นตัวเลือกสำหรับเหตุผลด้านประสิทธิภาพ ดังนั้นคุณต้องเริ่มต้นด้วยตนเอง
- โปรดทราบว่าคุณต้องรับผิดชอบในการวางตำแหน่งขนมปังปิ้ง
- ขนมปังปิ้งจะซ่อนโดยอัตโนมัติหากคุณไม่
autohide: false
ระบุ
prefers-reduced-motion
คิวรีสื่อ ดู
ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
ตัวอย่าง
ขั้นพื้นฐาน
เพื่อส่งเสริมการปิ้งขนมปังที่ขยายได้และคาดเดาได้ เราขอแนะนำส่วนหัวและส่วนเนื้อหา ส่วนหัวของ Toast ใช้display: flex
ช่วยให้จัดแนวเนื้อหาได้ง่ายด้วยยูทิลิตี้ margin และ flexbox ของเรา
ขนมปังปิ้งมีความยืดหยุ่นเท่าที่คุณต้องการและมีมาร์กอัปที่จำเป็นเพียงเล็กน้อย อย่างน้อยที่สุด เราต้องการองค์ประกอบเดียวเพื่อให้มีเนื้อหาที่ "ปิ้ง" ของคุณและสนับสนุนอย่างยิ่งให้กดปุ่มปิด
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</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, world! This is a toast message.
</div>
</div>
สด
คลิกปุ่มด้านล่างเพื่อแสดงขนมปังปิ้ง (ตำแหน่งที่มียูทิลิตี้ของเราอยู่ที่มุมล่างขวา) ที่ถูกซ่อนไว้โดยค่าเริ่มต้นด้วย.hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</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, 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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">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, world! This is a toast message.
</div>
</div>
ซ้อน
เมื่อคุณมีขนมปังปิ้งหลายแผ่น เราจะตั้งค่าเริ่มต้นให้เรียงซ้อนกันในแนวตั้งในลักษณะที่อ่านได้
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</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">
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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds 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">
Heads up, toasts will stack automatically
</div>
</div>
ตำแหน่ง
วางขนมปังปิ้งด้วย CSS ที่กำหนดเองตามที่คุณต้องการ ด้านขวาบนมักใช้สำหรับการแจ้งเตือน เช่นเดียวกับด้านบนตรงกลาง หากคุณจะแสดงขนมปังปิ้งครั้งละหนึ่งรายการ ให้ใส่รูปแบบการวางตำแหน่งบนไฟล์.toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</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, world! This is a toast message.
</div>
</div>
</div>
สำหรับระบบที่สร้างการแจ้งเตือนเพิ่มเติม ให้พิจารณาใช้องค์ประกอบการตัดคำเพื่อให้สามารถสแต็คได้ง่าย
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</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">
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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds 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">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
คุณยังสามารถใช้โปรแกรมอรรถประโยชน์ flexbox เพื่อจัดวางขนมปังปิ้งในแนวนอนและ/หรือแนวตั้งได้อีกด้วย
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</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, world! This is a toast message.
</div>
</div>
</div>
การเข้าถึง
ขนมปังปิ้งมีจุดประสงค์เพื่อรบกวนผู้เยี่ยมชมหรือผู้ใช้ของคุณเพียงเล็กน้อย ดังนั้นเพื่อช่วยเหลือผู้ที่มีโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน คุณควรห่อขนมปังปิ้งของคุณไว้ในaria-live
ภูมิภาค การเปลี่ยนแปลงไปยังภูมิภาคที่ใช้งานจริง (เช่น การฉีด/อัปเดตส่วนประกอบขนมปังปิ้ง) จะได้รับการประกาศโดยอัตโนมัติโดยโปรแกรมอ่านหน้าจอโดยไม่จำเป็นต้องย้ายโฟกัสของผู้ใช้หรือขัดจังหวะผู้ใช้ นอกจากนี้ ให้รวมaria-atomic="true"
เพื่อให้แน่ใจว่าขนมปังปิ้งทั้งหมดได้รับการประกาศเป็นหน่วยเดียว (อะตอม) เสมอ แทนที่จะเพียงแค่ประกาศสิ่งที่เปลี่ยนแปลง (ซึ่งอาจนำไปสู่ปัญหาหากคุณอัปเดตเนื้อหาของขนมปังเพียงบางส่วน หรือหากแสดงเนื้อหาขนมปังเดียวกันเดียวกัน ในเวลาต่อมา) หากข้อมูลที่จำเป็นมีความสำคัญต่อกระบวนการ เช่น รายการข้อผิดพลาดในแบบฟอร์ม ให้ใช้องค์ประกอบการแจ้งเตือนแทนขนมปังปิ้ง
โปรดทราบว่าต้องมีพื้นที่ถ่ายทอดสดในมาร์กอัปก่อนที่จะสร้างหรืออัปเดตขนมปัง หากคุณสร้างทั้งสองอย่างพร้อมกันแบบไดนามิกและแทรกลงในเพจ โดยทั่วไปแล้วเทคโนโลยีอำนวยความสะดวกจะไม่ประกาศเทคโนโลยีดังกล่าว
คุณต้องปรับrole
และaria-live
ระดับขึ้นอยู่กับเนื้อหา หากเป็นข้อความสำคัญ เช่น ข้อผิดพลาด ให้ใช้role="alert" aria-live="assertive"
มิฉะนั้น ใช้role="status" aria-live="polite"
แอตทริบิวต์
เนื่องจากเนื้อหาที่คุณกำลังแสดงเปลี่ยนแปลง โปรดอัปเดตdelay
ระยะหมดเวลาเพื่อให้ผู้ใช้มีเวลาเพียงพอในการอ่านข้อความ
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
เมื่อใช้autohide: false
คุณต้องเพิ่มปุ่มปิดเพื่อให้ผู้ใช้ปิดขนมปังปิ้งได้
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</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, world! This is a toast message.
</div>
</div>
แม้ว่าในทางเทคนิคแล้ว คุณสามารถเพิ่มการควบคุมที่สามารถโฟกัสได้/ดำเนินการได้ (เช่น ปุ่มหรือลิงก์เพิ่มเติม) ในขนมปังปิ้งของคุณ คุณควรหลีกเลี่ยงการทำเช่นนี้เพื่อซ่อนขนมปังปิ้งอัตโนมัติ แม้ว่าคุณจะให้ขนมปังปิ้งเป็นเวลานาน ผู้ใช้delay
คีย์บอร์ดและเทคโนโลยีอำนวยความสะดวกอาจพบว่าเป็นการยากที่จะเข้าถึงขนมปังปิ้งในเวลาที่จะดำเนินการ (เนื่องจากขนมปังปิ้งไม่ได้รับการโฟกัสเมื่อแสดง) หากคุณจำเป็นต้องมีการควบคุมเพิ่มเติมจริงๆ เราขอแนะนำให้ใช้ขนมปังปิ้งautohide: false
กับ
พฤติกรรมจาวาสคริปต์
การใช้งาน
เริ่มต้นขนมปังปิ้งผ่าน JavaScript:
$('.toast').toast(option)
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-animation=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
แอนิเมชั่น | บูลีน | จริง | ใช้ CSS Fade Transition กับขนมปังปิ้ง |
ซ่อนอัตโนมัติ | บูลีน | จริง | ซ่อนขนมปังอัตโนมัติ |
ล่าช้า | ตัวเลข | 500 |
หน่วงเวลาซ่อนขนมปังปิ้ง (มิลลิวินาที) |
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
$().toast(options)
แนบตัวจัดการขนมปังปิ้งกับคอลเลกชันองค์ประกอบ
.toast('show')
เผยขนมปังปิ้งขององค์ประกอบ กลับไปยังผู้โทรก่อนที่จะแสดงขนมปังปิ้งจริง (กล่าวคือ ก่อนที่shown.bs.toast
เหตุการณ์จะเกิดขึ้น) คุณต้องเรียกวิธีนี้ด้วยตนเอง แทนขนมปังของคุณจะไม่แสดง
$('#element').toast('show')
.toast('hide')
ซ่อนขนมปังปิ้งขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ขนมปังปิ้งจะถูกซ่อนจริงๆ (กล่าวคือ ก่อนที่hidden.bs.toast
เหตุการณ์จะเกิดขึ้น) คุณต้องเรียกวิธีนี้ด้วยตนเองหากคุณautohide
ทำfalse
$('#element').toast('hide')
.toast('dispose')
ซ่อนขนมปังปิ้งขององค์ประกอบ ขนมปังปิ้งของคุณจะยังคงอยู่บน DOM แต่จะไม่แสดงอีกต่อไป
$('#element').toast('dispose')
เหตุการณ์
ประเภทงาน | คำอธิบาย |
---|---|
show.bs.toast | เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshow การเรียกเมธอดของอินสแตนซ์ |
แสดง.bs.toast | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นขนมปังปิ้ง |
hide.bs.toast | เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhide มีการเรียกเมธอดของอินสแตนซ์ |
hidden.bs.toast | เหตุการณ์นี้เริ่มทำงานเมื่อขนมปังปิ้งถูกซ่อนจากผู้ใช้เสร็จแล้ว |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})