in English

ขนมปังปิ้ง

ส่งการแจ้งเตือนไปยังผู้เยี่ยมชมของคุณด้วยขนมปังปิ้ง ข้อความเตือนที่มีน้ำหนักเบาและปรับแต่งได้ง่าย

ขนมปังปิ้งเป็นการแจ้งเตือนแบบเบาที่ออกแบบมาเพื่อเลียนแบบการแจ้งเตือนแบบพุชที่ระบบปฏิบัติการมือถือและเดสก์ท็อปได้รับความนิยม สร้างด้วย 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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

ตำแหน่ง

วางขนมปังปิ้งด้วย CSS ที่กำหนดเองตามที่คุณต้องการ ด้านขวาบนมักใช้สำหรับการแจ้งเตือน เช่นเดียวกับด้านบนตรงกลาง หากคุณจะแสดงขนมปังปิ้งครั้งละหนึ่งรายการ ให้ใส่รูปแบบการวางตำแหน่งบนไฟล์.toast.

Bootstrap 11 นาทีที่แล้ว
สวัสดีชาวโลก! นี่คือข้อความอวยพร
<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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 ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

$().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...
})