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

ເຂົ້າຈີ່

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

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

ພາບລວມ

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

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

ຕົວຢ່າງ

ພື້ນຖານ

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

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

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

ໂປ່ງໃສ

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

<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, ເຊິ່ງຈະເພີ່ມຊ່ອງຫວ່າງບາງແນວຕັ້ງ.

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

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

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

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

<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 ທີ່ແຕກຕ່າງກັນກັບ ສີ ແລະ ຜົນປະໂຫຍດ ພື້ນຖານ ຂອງພວກເຮົາ . ທີ່ນີ້ພວກເຮົາໄດ້ເພີ່ມ .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>

ການຈັດວາງ

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

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

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

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

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

<!-- 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 ໄດ້.

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

ຊາສ

ຕົວແປ

$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);

ການ​ນໍາ​ໃຊ້

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

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 ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປໃສ່ເຕົາອົບ
autohide ບູລີນ true ເຊື່ອງ toast ອັດຕະໂນມັດ
delay ເລກ 5000 ເລື່ອນເວລາເຊື່ອງເຄື່ອງອົບ (ms)

ວິທີການ

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

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

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

ສະແດງໃຫ້ເຫັນ

ເປີດເຜີຍ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.toastເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງ, ແທນທີ່ຈະ toast ຂອງເຈົ້າຈະບໍ່ສະແດງ.

toast.show()

ເຊື່ອງ

ເຊື່ອງ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.toastເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງຖ້າທ່ານ autohideເຮັດ false.

toast.hide()

ຖິ້ມ

ເຊື່ອງ toast ຂອງອົງປະກອບ. toast ຂອງທ່ານຈະຍັງຄົງຢູ່ໃນ DOM ແຕ່ຈະບໍ່ສະແດງອີກຕໍ່ໄປ.

toast.dispose()

getInstance

ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ scrollspy ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

ວິ​ທີ​ການ ​ຄົງ ​ທີ່​ທີ່​ອະ​ນຸ​ຍາດ​ໃຫ້​ທ່ານ​ໄດ້​ຮັບ​ການ scrollspy instance ທີ່​ກ່ຽວ​ຂ້ອງ​ກັບ​ອົງ​ປະ​ກອບ DOM, ຫຼື​ສ້າງ​ໃຫມ່​ໃນ​ກໍ​ລະ​ນີ​ທີ່​ມັນ​ບໍ່​ໄດ້​ເລີ່ມ​ຕົ້ນ.

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 ນັດໝາຍນີ້ຖືກດັບໄຟເມື່ອເຄື່ອງອົບສຳເລັດແລ້ວຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້.
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})