ເຂົ້າຈີ່
ຊຸກຍູ້ການແຈ້ງເຕືອນໃຫ້ຜູ້ມາຢ້ຽມຢາມຂອງທ່ານທີ່ມີ 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
.
<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 ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
ສະແດງໃຫ້ເຫັນ
ເປີດເຜີຍ 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...
})