Source

ເຂົ້າຈີ່

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

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

ພາບລວມ

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

  • ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js .
  • Toasts ແມ່ນເລືອກເຂົ້າສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົວທ່ານເອງ .
  • ກະລຸນາສັງເກດວ່າທ່ານມີຄວາມຮັບຜິດຊອບສໍາລັບການວາງຕໍາແຫນ່ງ 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 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>

ໂປ່ງໃສ

Toasts ແມ່ນມີຄວາມໂປ່ງໃສເລັກນ້ອຍ, ດັ່ງນັ້ນພວກມັນປະສົມກັບສິ່ງໃດກໍ່ຕາມທີ່ພວກມັນອາດຈະປາກົດ. ສໍາລັບຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນ backdrop-filterຄຸນສົມບັດ CSS, ພວກເຮົາຈະພະຍາຍາມເຮັດໃຫ້ມົວອົງປະກອບພາຍໃຕ້ toast ເປັນ.

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

ການຈັດວາງ

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

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

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

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

ນອກ​ນັ້ນ​ທ່ານ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ 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" style="min-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>

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

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

ພຶດຕິກໍາ JavaScript

ການ​ນໍາ​ໃຊ້

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

$('.toast').toast(option)

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-animation="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປໃສ່ເຕົາອົບ
ເຊື່ອງອັດຕະໂນມັດ ບູລີນ ຄວາມຈິງ ເຊື່ອງ toast ອັດຕະໂນມັດ
ຊັກຊ້າ ເລກ 500 ເລື່ອນເວລາເຊື່ອງເຄື່ອງອົບ (ms)

ວິທີການ

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

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

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

$().toast(options)

ແນບຕົວຈັບ toast ກັບຄໍເລັກຊັນອົງປະກອບ.

.toast('show')

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

$('#element').toast('show')

.toast('hide')

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

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

ເຫດການ

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