ເຂົ້າຈີ່
ຊຸກຍູ້ການແຈ້ງເຕືອນໃຫ້ຜູ້ມາຢ້ຽມຢາມຂອງທ່ານທີ່ມີ toast ເປັນ, ຂໍ້ຄວາມແຈ້ງເຕືອນນ້ໍາຫນັກເບົາແລະປັບແຕ່ງໄດ້ຢ່າງງ່າຍດາຍ.
Toasts ແມ່ນການແຈ້ງເຕືອນທີ່ມີນ້ໍາຫນັກເບົາທີ່ອອກແບບມາເພື່ອຈໍາລອງການແຈ້ງການຊຸກຍູ້ທີ່ໄດ້ຮັບຄວາມນິຍົມຈາກລະບົບປະຕິບັດການມືຖືແລະ desktop. ພວກມັນຖືກສ້າງຂຶ້ນດ້ວຍ flexbox, ດັ່ງນັ້ນພວກມັນງ່າຍຕໍ່ການຈັດຕໍາແຫນ່ງແລະຈັດຕໍາແຫນ່ງ.
ພາບລວມ
ສິ່ງທີ່ຄວນຮູ້ເມື່ອໃຊ້ປລັກອິນ toast:
- ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການ
util.js
. - Toasts ແມ່ນເລືອກເຂົ້າສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົວທ່ານເອງ .
- ກະລຸນາສັງເກດວ່າທ່ານມີຄວາມຮັບຜິດຊອບສໍາລັບການວາງຕໍາແຫນ່ງ toasts.
- Toasts ຈະເຊື່ອງໂດຍອັດຕະໂນມັດຖ້າທ່ານບໍ່ໄດ້ລະບຸ
autohide: false
.
ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motion
ສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .
ຕົວຢ່າງ
ພື້ນຖານ
ເພື່ອຊຸກຍູ້ໃຫ້ສາມາດຂະຫຍາຍໄດ້ ແລະສາມາດຄາດເດົາໄດ້, ພວກເຮົາຂໍແນະນຳຫົວ ແລະສ່ວນໂຕ. Toast headers ໃຊ້ display: flex
, ຊ່ວຍໃຫ້ການຈັດຮຽງຂອງເນື້ອຫາໄດ້ງ່າຍຍ້ອນຂອບຂອບແລະ flexbox utilities ຂອງພວກເຮົາ.
Toasts ແມ່ນມີຄວາມຍືດຫຍຸ່ນຕາມທີ່ທ່ານຕ້ອງການແລະມີເຄື່ອງຫມາຍທີ່ຕ້ອງການຫນ້ອຍຫຼາຍ. ຢ່າງຫນ້ອຍ, ພວກເຮົາຕ້ອງການອົງປະກອບດຽວເພື່ອໃຫ້ມີເນື້ອໃນ "toasted" ຂອງທ່ານແລະຊຸກຍູ້ໃຫ້ກົດປຸ່ມປິດ.
ໂປ່ງໃສ
Toasts ແມ່ນມີຄວາມໂປ່ງໃສເລັກນ້ອຍ, ດັ່ງນັ້ນພວກມັນປະສົມກັບສິ່ງໃດກໍ່ຕາມທີ່ພວກມັນອາດຈະປາກົດ. ສໍາລັບຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນ backdrop-filter
ຄຸນສົມບັດ CSS, ພວກເຮົາຈະພະຍາຍາມເຮັດໃຫ້ມົວອົງປະກອບພາຍໃຕ້ toast ເປັນ.
ການວາງຊ້ອນກັນ
ເມື່ອເຈົ້າມີເຂົ້າໜົມຫຼາຍອັນ, ພວກເຮົາຕັ້ງພວກມັນໄວ້ຕາມແນວຕັ້ງໃນແບບທີ່ອ່ານໄດ້.
ການຈັດວາງ
ວາງ toasts ດ້ວຍ CSS ແບບກໍານົດເອງຕາມທີ່ທ່ານຕ້ອງການ. ທາງດ້ານຂວາເທິງແມ່ນມັກຈະໃຊ້ສໍາລັບການແຈ້ງເຕືອນ, ເຊັ່ນດຽວກັບກາງເທິງ. ຖ້າທ່ານພຽງແຕ່ຈະສະແດງຫນຶ່ງ toast ໃນເວລານັ້ນ, ເອົາຮູບແບບການຈັດຕໍາແຫນ່ງທີ່ຖືກຕ້ອງໃນ .toast
.
ສໍາລັບລະບົບທີ່ສ້າງການແຈ້ງເຕືອນເພີ່ມເຕີມ, ພິຈາລະນານໍາໃຊ້ອົງປະກອບຫໍ່ເພື່ອໃຫ້ພວກເຂົາສາມາດ stack ໄດ້ຢ່າງງ່າຍດາຍ.
ນອກນັ້ນທ່ານຍັງສາມາດໄດ້ຮັບການ fancy ກັບອຸປະກອນ flexbox ເພື່ອຈັດ toasts ຢຽດຕາມທາງຂວາງແລະ / ຫຼືຕັ້ງ.
ການເຂົ້າເຖິງ
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.
ເມື່ອໃຊ້ autohide: false
, ທ່ານຕ້ອງເພີ່ມປຸ່ມປິດເພື່ອໃຫ້ຜູ້ໃຊ້ປິດ toast ໄດ້.
ພຶດຕິກໍາ JavaScript
ການນໍາໃຊ້
ເລີ່ມຕົ້ນ toasts ຜ່ານ JavaScript:
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-
, ໃນ data-animation=""
.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ພາບເຄື່ອນໄຫວ | ບູລີນ | ຄວາມຈິງ | ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປໃສ່ເຕົາອົບ |
ເຊື່ອງອັດຕະໂນມັດ | ບູລີນ | ຄວາມຈິງ | ເຊື່ອງ toast ອັດຕະໂນມັດ |
ຊັກຊ້າ | ເລກ | 500 |
ເລື່ອນເວລາເຊື່ອງເຄື່ອງອົບ (ms) |
ວິທີການ
ວິທີການ asynchronous ແລະການຫັນປ່ຽນ
ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
$().toast(options)
ແນບຕົວຈັບ toast ກັບຄໍເລັກຊັນອົງປະກອບ.
.toast('show')
ເປີດເຜີຍ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.toast
ເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງ, ແທນທີ່ຈະ toast ຂອງເຈົ້າຈະບໍ່ສະແດງ.
.toast('hide')
ເຊື່ອງ toast ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ toast ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.toast
ເຫດການຈະເກີດຂຶ້ນ). ທ່ານຕ້ອງໂທຫາວິທີການນີ້ດ້ວຍຕົນເອງຖ້າທ່ານ autohide
ເຮັດ false
.
.toast('dispose')
ເຊື່ອງ toast ຂອງອົງປະກອບ. toast ຂອງທ່ານຈະຍັງຄົງຢູ່ໃນ DOM ແຕ່ຈະບໍ່ສະແດງອີກຕໍ່ໄປ.
ເຫດການ
ປະເພດເຫດການ | ລາຍລະອຽດ |
---|---|
show.bs.toast | ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ show ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
show.bs.toast | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ toast ໄດ້ຖືກເຮັດໃຫ້ເຫັນໄດ້ໂດຍຜູ້ໃຊ້. |
hide.bs.toast | ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hide ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
hidden.bs.toast | ນັດໝາຍນີ້ຖືກດັບໄຟເມື່ອເຄື່ອງອົບສຳເລັດແລ້ວຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້. |