នំដុត

ជំរុញការជូនដំណឹងទៅកាន់អ្នកទស្សនារបស់អ្នកជាមួយនឹង toast, សារជូនដំណឹងទម្ងន់ស្រាល និងអាចប្ដូរតាមបំណងយ៉ាងងាយស្រួល។

នៅលើទំព័រនេះ។

Toasts គឺជាការជូនដំណឹងទម្ងន់ស្រាលដែលត្រូវបានរចនាឡើងដើម្បីធ្វើត្រាប់តាមការជូនដំណឹងជំរុញដែលត្រូវបានពេញនិយមដោយប្រព័ន្ធប្រតិបត្តិការទូរស័ព្ទ និងកុំព្យូទ័រ។ ពួកវាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox ដូច្នេះពួកវាងាយស្រួលក្នុងការតម្រឹម និងដាក់ទីតាំង។

ទិដ្ឋភាពទូទៅ

អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយ toast៖

Toasts ត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលដំណើរការ ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម វា ដោយខ្លួនឯង
Toasts នឹងលាក់ដោយស្វ័យប្រវត្តិ ប្រសិនបើអ្នកមិនបញ្ជាក់ autohide: false។

ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motionសំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។

ឧទាហរណ៍

មូលដ្ឋាន

ដើម្បីលើកទឹកចិត្តដល់ការដុតនំដែលអាចពង្រីកបាន និងអាចទស្សន៍ទាយបាន យើងសូមណែនាំបឋមកថា និងតួ។ បឋមកថា Toast ប្រើ display: flexអនុញ្ញាតឱ្យតម្រឹមមាតិកាងាយស្រួល ដោយសាររឹម និងឧបករណ៍ប្រើប្រាស់ flexbox របស់យើង។

នំប៉ាវគឺអាចបត់បែនបានតាមដែលអ្នកត្រូវការ និងមានកំណត់ចំណាំតិចតួចបំផុត។ យ៉ាងហោចណាស់ យើងទាមទារធាតុតែមួយដើម្បីផ្ទុកមាតិកា "ដុត" របស់អ្នក និងលើកទឹកចិត្តយ៉ាងខ្លាំងដល់ប៊ូតុងបិទ។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

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

រស់នៅ

ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញនំបុ័ងអាំង (ដាក់ជាមួយឧបករណ៍ប្រើប្រាស់របស់យើងនៅជ្រុងខាងស្តាំខាងក្រោម) ដែលត្រូវបានលាក់តាមលំនាំដើមជាមួយ .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>

ថ្លា

នំបញ្ចុកមានពណ៌ថ្លាបន្តិចដើម្បីបញ្ចូលគ្នាជាមួយអ្វីដែលនៅខាងក្រោមពួកវា។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

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

ជង់

អ្នកអាចជង់នំដុតដោយរុំវានៅក្នុងធុងដុត ដែលនឹងបន្ថែមគម្លាតមួយចំនួនបញ្ឈរ។

ឃើញទេ? គ្រាន់តែដូចនេះ។

សូមប្រុងប្រយត្ន័ នំបុ័ងនឹងជង់ដោយស្វ័យប្រវត្តិ

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

មាតិកាផ្ទាល់ខ្លួន

ប្ដូរការធ្វើនំរបស់អ្នកតាមបំណងដោយយកធាតុរងចេញ កែសម្រួលវាជាមួយ ឧបករណ៍ប្រើប្រាស់ ឬដោយបន្ថែមការសម្គាល់ផ្ទាល់ខ្លួនរបស់អ្នក។ នៅទីនេះយើងបានបង្កើតនំបុ័ងអាំងដ៏សាមញ្ញមួយដោយយកលំនាំដើមចេញ .toast-headerបន្ថែមរូបតំណាងលាក់ផ្ទាល់ខ្លួនពី Bootstrap Icons និងប្រើប្រាស់ ឧបករណ៍ប្រើប្រាស់ flexbox មួយចំនួន ដើម្បីកែតម្រូវប្លង់។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

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

ម៉្យាងទៀត អ្នកក៏អាចបន្ថែមវត្ថុបញ្ជា និងសមាសធាតុបន្ថែមទៅលើនំដុតផងដែរ។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

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

គ្រោងការណ៍ពណ៌

ដោយផ្អែកលើឧទាហរណ៍ខាងលើ អ្នកអាចបង្កើតពណ៌ចម្រុះផ្សេងគ្នាជាមួយ ឧបករណ៍ប្រើប្រាស់ ពណ៌ និង ផ្ទៃខាងក្រោយ របស់យើង ។ នៅទីនេះយើងបានបន្ថែម .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>

ការដាក់

ដាក់នំជាមួយ CSS ផ្ទាល់ខ្លួនតាមដែលអ្នកត្រូវការ។ ខាងស្តាំខាងលើត្រូវបានប្រើជាញឹកញាប់សម្រាប់ការជូនដំណឹង ដូចជាផ្នែកខាងលើកណ្តាល។ ប្រសិនបើអ្នកគ្រាន់តែនឹងបង្ហាញនំមួយក្នុងពេលតែមួយ សូមដាក់រចនាប័ទ្មទីតាំងត្រឹមត្រូវនៅលើ .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>

សម្រាប់ប្រព័ន្ធដែលបង្កើតការជូនដំណឹងបន្ថែម សូមពិចារណាប្រើប្រាស់ធាតុរុំ ដូច្នេះពួកគេអាចជង់បានយ៉ាងងាយស្រួល។

ឃើញទេ? គ្រាន់តែដូចនេះ។

សូមប្រុងប្រយត្ន័ នំបុ័ងនឹងជង់ដោយស្វ័យប្រវត្តិ

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

អ្នកក៏អាចទទួលបានភាពប្រណិតជាមួយនឹងឧបករណ៍ប្រើប្រាស់ flexbox ដើម្បីតម្រឹមនំបញ្ចុកផ្តេក និង/ឬបញ្ឈរ។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

<!-- 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 មានបំណងដើម្បីជាការរំខានតិចតួចដល់អ្នកទស្សនា ឬអ្នកប្រើប្រាស់របស់អ្នក ដូច្នេះដើម្បីជួយអ្នកដែលមានកម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា អ្នកគួរតែរុំនំបុ័ងរបស់អ្នកនៅក្នុង aria-liveតំបន់ មួយ ។ ការផ្លាស់ប្តូរទៅតំបន់បន្តផ្ទាល់ (ដូចជាការចាក់/ធ្វើបច្ចុប្បន្នភាពសមាសធាតុ toast) ត្រូវបានប្រកាសដោយស្វ័យប្រវត្តិដោយអ្នកអានអេក្រង់ ដោយមិនចាំបាច់ផ្លាស់ទីការផ្តោតអារម្មណ៍របស់អ្នកប្រើ ឬរំខានអ្នកប្រើប្រាស់។ លើសពីនេះទៀត រួមបញ្ចូល aria-atomic="true"ដើម្បីធានាថា toast ទាំងមូលតែងតែត្រូវបានប្រកាសជាឯកតា (អាតូមិក) តែមួយ ជាជាងការប្រកាសពីអ្វីដែលបានផ្លាស់ប្តូរ (ដែលអាចនាំឱ្យមានបញ្ហាប្រសិនបើអ្នកគ្រាន់តែធ្វើបច្ចុប្បន្នភាពផ្នែកនៃមាតិការបស់ toast ឬប្រសិនបើបង្ហាញមាតិកា toast ដូចគ្នា នៅពេលក្រោយ) ។ ប្រសិនបើព័ត៌មានដែលត្រូវការមានសារៈសំខាន់សម្រាប់ដំណើរការ ឧទាហរណ៍សម្រាប់បញ្ជីកំហុសក្នុងទម្រង់មួយ បន្ទាប់មកប្រើ សមាសភាគការជូនដំណឹងជំនួសឱ្យនំប៉័ង។

ចំណាំថាតំបន់បន្តផ្ទាល់ត្រូវតែមានវត្តមាននៅក្នុងការសម្គាល់ មុនពេល toast ត្រូវបានបង្កើត ឬធ្វើបច្ចុប្បន្នភាព។ ប្រសិនបើអ្នកបង្កើតថាមវន្តទាំងពីរក្នុងពេលតែមួយ ហើយបញ្ចូលពួកវាទៅក្នុងទំព័រ ជាទូទៅពួកវានឹងមិនត្រូវបានប្រកាសដោយបច្ចេកវិទ្យាជំនួយទេ។

អ្នកក៏ត្រូវសម្របសម្រួល roleនិង aria-liveកម្រិតអាស្រ័យលើខ្លឹមសារ។ ប្រសិនបើវាជាសារសំខាន់ដូចជាកំហុស សូមប្រើ role="alert" aria-live="assertive"បើមិនដូច្នេះទេ ប្រើ role="status" aria-live="polite"គុណលក្ខណៈ។

ដោយសារខ្លឹមសារដែលអ្នកកំពុងបង្ហាញការផ្លាស់ប្តូរ ត្រូវប្រាកដថាធ្វើបច្ចុប្បន្នភាពការ delayអស់ពេល ដើម្បីឲ្យអ្នកប្រើប្រាស់មានពេលគ្រប់គ្រាន់ដើម្បីអាននំបុ័ង។

<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អ្នកត្រូវតែបន្ថែមប៊ូតុងបិទ ដើម្បីអនុញ្ញាតឱ្យអ្នកប្រើច្រានចោលការដុតនំបុ័ង។

សួស្តីពិភពលោក! នេះជាសារជូនពរ។

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

ខណៈពេលដែលតាមលក្ខណៈបច្ចេកទេស វាអាចបន្ថែមការគ្រប់គ្រងដែលអាចផ្តោតបាន ឬអាចធ្វើសកម្មភាពបាន (ដូចជាប៊ូតុង ឬតំណភ្ជាប់បន្ថែម) នៅក្នុងនំបុ័ងអាំងរបស់អ្នក អ្នកគួរតែជៀសវាងការធ្វើបែបនេះសម្រាប់ការលាក់ការដុតដោយស្វ័យប្រវត្តិ។ ទោះបីជាអ្នកផ្តល់ពេលឱ្យនំប៉័ង delayអស់ រយៈពេលយូរ ក៏ដោយ អ្នកប្រើប្រាស់ក្តារចុច និងបច្ចេកវិទ្យាជំនួយអាចពិបាកក្នុងការឈានដល់ការដុតនំប៉័ងទាន់ពេលដើម្បីធ្វើសកម្មភាព (ចាប់តាំងពីនំបុ័ងអាំងមិនទទួលបានការផ្តោតអារម្មណ៍នៅពេលវាត្រូវបានបង្ហាញ)។ ប្រសិនបើអ្នកពិតជាត្រូវតែមានការគ្រប់គ្រងបន្ថែមទៀត យើងសូមណែនាំឱ្យប្រើ 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);

ការប្រើប្រាស់

ចាប់ផ្តើមនំបុ័ងអាំងតាមរយៈ 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 ទៅ toast
`autohide`	ប៊ូលីន	`true`	លាក់នំបុ័ងដោយស្វ័យប្រវត្តិ
`delay`	ចំនួន	`5000`	ពន្យាពេលលាក់នំដុត (ms)

វិធីសាស្រ្ត

វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល

វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។

សូមមើលឯកសារ JavaScript របស់យើងសម្រាប់ព័ត៌មានបន្ថែម ។

បង្ហាញ

បង្ហាញការដុតរបស់ធាតុ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលដែលនំបញ្ចុកត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧ. មុន shown.bs.toastព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីសាស្ត្រនេះដោយដៃ ជំនួសវិញ toast របស់អ្នកនឹងមិនបង្ហាញទេ។

toast.show()

លាក់

លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលការដុតត្រូវបានលាក់ (ឧ. មុនពេល hidden.bs.toastព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីនេះដោយដៃប្រសិនបើអ្នកបានបង្កើត autohideទៅ false.

toast.hide()

បោះចោល

លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ នំបុ័ងអាំងរបស់អ្នកនឹងនៅតែមាននៅលើ DOM ប៉ុន្តែនឹងមិនបង្ហាញទៀតទេ។

toast.dispose()

getInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ DOM

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

getOrCreateInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម

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

ព្រឹត្តិការណ៍

ប្រភេទព្រឹត្តិការណ៍	ការពិពណ៌នា
`show.bs.toast`	ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល `show`វិធីសាស្ត្រ instance ត្រូវបានហៅ។
`shown.bs.toast`	ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការដុតត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ។
`hide.bs.toast`	ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់ភ្លាមៗនៅពេលដែល `hide`វិធីសាស្ត្រវត្ថុត្រូវបានហៅ។
`hidden.bs.toast`	ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល toast បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់។

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})