ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

ເຂົ້າຈີ່

ຊຸກ​ຍູ້​ການ​ແຈ້ງ​ເຕືອນ​ໃຫ້​ຜູ້​ມາ​ຢ້ຽມ​ຢາມ​ຂອງ​ທ່ານ​ທີ່​ມີ toast ເປັນ​, ຂໍ້​ຄວາມ​ແຈ້ງ​ເຕືອນ​ນ​້​ໍາ​ຫນັກ​ເບົາ​ແລະ​ປັບ​ແຕ່ງ​ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​.

ໃນໜ້ານີ້

Toasts ແມ່ນການແຈ້ງເຕືອນທີ່ມີນ້ໍາຫນັກເບົາທີ່ອອກແບບມາເພື່ອຈໍາລອງການແຈ້ງການຊຸກຍູ້ທີ່ໄດ້ຮັບຄວາມນິຍົມຈາກລະບົບປະຕິບັດການມືຖືແລະ desktop. ພວກມັນຖືກສ້າງຂຶ້ນດ້ວຍ flexbox, ດັ່ງນັ້ນພວກມັນງ່າຍຕໍ່ການຈັດຕໍາແຫນ່ງແລະຈັດຕໍາແຫນ່ງ.

ພາບລວມ

ສິ່ງທີ່ຄວນຮູ້ເມື່ອໃຊ້ປລັກອິນ toast:

  • Toasts ແມ່ນເລືອກເຂົ້າສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົວທ່ານເອງ .
  • Toasts ຈະເຊື່ອງໂດຍອັດຕະໂນມັດຖ້າທ່ານບໍ່ໄດ້ລະບຸ autohide: false.
ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motionສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .

ຕົວຢ່າງ

ພື້ນຖານ

ເພື່ອຊຸກຍູ້ໃຫ້ສາມາດຂະຫຍາຍໄດ້ ແລະສາມາດຄາດເດົາໄດ້, ພວກເຮົາຂໍແນະນຳຫົວ ແລະສ່ວນໂຕ. Toast headers ໃຊ້ display: flex, ຊ່ວຍໃຫ້ການຈັດຮຽງຂອງເນື້ອຫາໄດ້ງ່າຍຍ້ອນຂອບຂອບແລະ flexbox utilities ຂອງພວກເຮົາ.

Toasts ແມ່ນມີຄວາມຍືດຫຍຸ່ນຕາມທີ່ທ່ານຕ້ອງການແລະມີເຄື່ອງຫມາຍທີ່ຕ້ອງການຫນ້ອຍຫຼາຍ. ຢ່າງຫນ້ອຍ, ພວກເຮົາຕ້ອງການອົງປະກອບດຽວເພື່ອໃຫ້ມີເນື້ອໃນ "toasted" ຂອງທ່ານແລະຊຸກຍູ້ໃຫ້ກົດປຸ່ມປິດ.

html 
<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>
ກ່ອນຫນ້ານີ້, scripts ຂອງພວກເຮົາໄດ້ເພີ່ມ .hideຫ້ອງຮຽນແບບເຄື່ອນໄຫວເພື່ອເຊື່ອງ toast ຢ່າງສົມບູນ (ກັບ display:none, ແທນທີ່ຈະພຽງແຕ່ກັບ opacity:0). ດຽວນີ້ບໍ່ຈຳເປັນອີກຕໍ່ໄປ. ຢ່າງໃດກໍ່ຕາມ, ສໍາລັບຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫລັງ, script ຂອງພວກເຮົາຈະສືບຕໍ່ສະຫຼັບຊັ້ນຮຽນ (ເຖິງແມ່ນວ່າບໍ່ຈໍາເປັນຕ້ອງໃຊ້ມັນ) ຈົນກ່ວາສະບັບທີ່ສໍາຄັນຕໍ່ໄປ.

ຕົວຢ່າງສົດ

ຄລິກທີ່ປຸ່ມຂ້າງລຸ່ມເພື່ອສະແດງ toast (ຕັ້ງກັບເຄື່ອງໃຊ້ຂອງພວກເຮົາຢູ່ມຸມຂວາລຸ່ມ) ທີ່ຖືກເຊື່ອງໄວ້ໂດຍຄ່າເລີ່ມຕົ້ນ.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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>

ພວກເຮົາໃຊ້ JavaScript ຕໍ່ໄປນີ້ເພື່ອກະຕຸ້ນຕົວຢ່າງ toast ສົດຂອງພວກເຮົາ:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ໂປ່ງໃສ

Toasts ມີຄວາມໂປ່ງໃສເລັກນ້ອຍເພື່ອໃຫ້ເຂົ້າກັນກັບສິ່ງທີ່ຢູ່ຂ້າງລຸ່ມ.

html 
<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>

ການວາງຊ້ອນກັນ

ທ່ານສາມາດ stack toasts ໄດ້ໂດຍການຫໍ່ໃຫ້ເຂົາເຈົ້າໃນພາຊະນະ toast, ເຊິ່ງຈະເພີ່ມຊ່ອງຫວ່າງບາງແນວຕັ້ງ.

html 
<div class="toast-container position-static">
  <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>

ເນື້ອໃນທີ່ກໍາຫນົດເອງ

ປັບແຕ່ງ toasts ຂອງທ່ານໂດຍການເອົາອົງປະກອບຍ່ອຍ, ປັບໃຫ້ເຂົາເຈົ້າມີຜົນ ປະໂຫຍດ , ຫຼືໂດຍການເພີ່ມເຄື່ອງຫມາຍຂອງທ່ານເອງ. ທີ່ນີ້ພວກເຮົາໄດ້ສ້າງ toast ທີ່ງ່າຍກວ່າໂດຍການຖອນຄ່າເລີ່ມຕົ້ນ .toast-header, ເພີ່ມໄອຄອນຊ່ອນທີ່ກໍາຫນົດເອງຈາກ Bootstrap Icons , ແລະໃຊ້ບາງ flexbox utilities ເພື່ອປັບຮູບແບບ.

html 
<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>

ອີກທາງເລືອກ, ທ່ານຍັງສາມາດເພີ່ມການຄວບຄຸມເພີ່ມເຕີມແລະອົງປະກອບຂອງ toasts.

html 
<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>

ລະບົບສີ

ການກໍ່ສ້າງໃນຕົວຢ່າງຂ້າງເທິງ, ທ່ານສາມາດສ້າງຮູບແບບສີ toast ທີ່ແຕກຕ່າງກັນກັບ ສີ ແລະ ຜົນປະໂຫຍດ ພື້ນຖານ ຂອງພວກເຮົາ . ທີ່ນີ້ພວກເຮົາໄດ້ເພີ່ມ .text-bg-primaryໃສ່ .toast, ແລະຫຼັງຈາກນັ້ນເພີ່ມ .btn-close-whiteໃສ່ປຸ່ມປິດຂອງພວກເຮົາ. ສໍາລັບຂອບທີ່ຄົມຊັດ, ພວກເຮົາເອົາຂອບມາດຕະຖານອອກດ້ວຍ .border-0.

html 
<div class="toast align-items-center text-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>

ການຈັດວາງ

ວາງ toasts ດ້ວຍ CSS ແບບກໍານົດເອງຕາມທີ່ທ່ານຕ້ອງການ. ທາງດ້ານຂວາເທິງແມ່ນມັກຈະໃຊ້ສໍາລັບການແຈ້ງເຕືອນ, ເຊັ່ນດຽວກັບກາງເທິງ. ຖ້າທ່ານພຽງແຕ່ຈະສະແດງຫນຶ່ງ toast ໃນເວລານັ້ນ, ເອົາຮູບແບບການຈັດຕໍາແຫນ່ງທີ່ຖືກຕ້ອງໃນ .toast.

Bootstrap 11 ນາທີກ່ອນ
ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ! ນີ້ແມ່ນຂໍ້ຄວາມ toast.
html 
<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 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>

ສໍາລັບລະບົບທີ່ສ້າງການແຈ້ງເຕືອນເພີ່ມເຕີມ, ພິຈາລະນານໍາໃຊ້ອົງປະກອບຫໍ່ເພື່ອໃຫ້ພວກເຂົາສາມາດ stack ໄດ້ຢ່າງງ່າຍດາຍ.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

ນອກ​ນັ້ນ​ທ່ານ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ fancy ກັບ​ອຸ​ປະ​ກອນ flexbox ເພື່ອ​ຈັດ toasts ຢຽດ​ຕາມ​ທາງ​ຂວາງ​ແລະ / ຫຼື​ຕັ້ງ​.

html 
<!-- 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>

ການເຂົ້າເຖິງ

Toasts ມີຈຸດປະສົງເພື່ອເປັນການລົບກວນເລັກນ້ອຍຕໍ່ຜູ້ເຂົ້າຊົມຫຼືຜູ້ໃຊ້ຂອງທ່ານ, ດັ່ງນັ້ນເພື່ອຊ່ວຍໃຫ້ຜູ້ທີ່ມີເຄື່ອງອ່ານຫນ້າຈໍແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນ, ທ່ານຄວນຫໍ່ toasts ຂອງທ່ານໃນ aria-liveພາກພື້ນ . ການປ່ຽນແປງໃນພາກພື້ນທີ່ມີຊີວິດ (ເຊັ່ນ: ການສີດ / ການປັບປຸງອົງປະກອບຂອງ toast) ຈະຖືກປະກາດໂດຍອັດຕະໂນມັດໂດຍຜູ້ອ່ານຫນ້າຈໍໂດຍບໍ່ຈໍາເປັນຕ້ອງຍ້າຍຈຸດສຸມຂອງຜູ້ໃຊ້ຫຼືຂັດຂວາງຜູ້ໃຊ້. ນອກຈາກນັ້ນ, ປະກອບມີ aria-atomic="true"ເພື່ອຮັບປະກັນວ່າ toast ທັງຫມົດຈະຖືກປະກາດເປັນຫນ່ວຍດຽວ (ປະລໍາມະນູ), ແທນທີ່ຈະພຽງແຕ່ປະກາດສິ່ງທີ່ມີການປ່ຽນແປງ (ເຊິ່ງສາມາດນໍາໄປສູ່ບັນຫາຖ້າຫາກວ່າທ່ານພຽງແຕ່ປັບປຸງບາງສ່ວນຂອງເນື້ອໃນຂອງ 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 ໄດ້.

html 
<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 ຂອງທ່ານ, ທ່ານຄວນຫຼີກເວັ້ນການເຮັດນີ້ເພື່ອ autohiding toasts. ເຖິງແມ່ນວ່າທ່ານໃຫ້ toast ເປັນເວ delayລາ ດົນ , ຜູ້ໃຊ້ແປ້ນພິມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອອາດຈະພົບວ່າມັນຍາກທີ່ຈະເຂົ້າຫາ toast ໃນເວລາປະຕິບັດ (ເນື່ອງຈາກ toasts ບໍ່ໄດ້ຮັບການສຸມໃສ່ໃນເວລາທີ່ພວກມັນຖືກສະແດງ). ຖ້າທ່ານຢ່າງແທ້ຈິງຕ້ອງມີການຄວບຄຸມຕື່ມອີກ, ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ toast ກັບ autohide: false.

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, ປະຈຸບັນນີ້ toasts ໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .toastເພື່ອເພີ່ມປະສິດທິພາບການປັບແຕ່ງໃນເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

ຕົວແປ Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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($black, .05);

ການ​ນໍາ​ໃຊ້

ເລີ່ມຕົ້ນ toasts ຜ່ານ JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

ກະຕຸ້ນ

ການຍົກເລີກສາມາດເຮັດໄດ້ດ້ວຍ dataຄຸນລັກສະນະຂອງປຸ່ມ ພາຍໃນ toast ດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ຫຼືໃສ່ປຸ່ມ ນອກ toast ໂດຍໃຊ້ data-bs-targetດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

ທາງເລືອກ

ເນື່ອງຈາກທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript, ທ່ານສາມາດເພີ່ມຊື່ທາງເລືອກໃສ່ data-bs-, ດັ່ງໃນ data-bs-animation="{value}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
animation ບູລີນ true ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປໃສ່ເຕົາອົບ.
autohide ບູລີນ true ເຊື່ອງ toast ອັດຕະໂນມັດຫຼັງຈາກການຊັກຊ້າ.
delay ເລກ 5000 ເລື່ອນເວລາເປັນມິນລິວິນາທີກ່ອນທີ່ຈະເຊື່ອງ toast.

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ວິທີການ ລາຍລະອຽດ
dispose ເຊື່ອງ toast ຂອງອົງປະກອບ. toast ຂອງທ່ານຈະຍັງຄົງຢູ່ໃນ DOM ແຕ່ຈະບໍ່ສະແດງອີກຕໍ່ໄປ.
getInstance ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ toast ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM.
ຕົວຢ່າງ: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)ສົ່ງຄືນຕົວຢ່າງ Bootstrap toast.
getOrCreateInstance ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ toast ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງອັນໃຫມ່, ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)ຕອບຕົວຢ່າງ Bootstrap toast.
hide ເຊື່ອງ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.toastເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງຖ້າທ່ານ autohideເຮັດ false.
isShown ສົ່ງຄ່າ boolean ຕາມສະຖານະຂອງການເບິ່ງເຫັນຂອງ toast.
show ເປີດເຜີຍ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.toastເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງ, ແທນທີ່ຈະ toast ຂອງເຈົ້າຈະບໍ່ສະແດງ.

ເຫດການ

ເຫດການ ລາຍລະອຽດ
hide.bs.toast ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.toast ນັດໝາຍນີ້ຖືກດັບໄຟເມື່ອເຄື່ອງອົບສຳເລັດແລ້ວຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້.
show.bs.toast ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
shown.bs.toast ເຫດການນີ້ຖືກຍິງອອກເມື່ອ toast ໄດ້ຖືກເຮັດໃຫ້ເຫັນໄດ້ໂດຍຜູ້ໃຊ້. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})