Toast ahorow a wɔde yɛ aduan

Pia amanneɛbɔ ahorow kɔ wo nsrahwɛfo nkyɛn denam toast, kɔkɔbɔ nkrasɛm a emu yɛ hare na ɛnyɛ den sɛ wobɛsesa so.

Wɔ kratafa yi so

Toasts yɛ amanneɛbɔ a emu yɛ hare a wɔayɛ sɛ ɛbɛsuasua push notifications a mobile ne desktop dwumadi nhyehyɛe ahorow ama agye din no. Wɔde flexbox na ɛyɛe, enti ɛnyɛ den sɛ wobɛhyehyɛ no pɛpɛɛpɛ na wode asi hɔ.

Nsɛm a Wɔaka abom

Nneɛma a ɛsɛ sɛ wuhu bere a wode toast plugin no redi dwuma no:

Toasts yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
Toasts bɛhintaw ne ho sɛ woankyerɛ a autohide: false.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Nhwɛso ahorow

Mfiasesɛm

Sɛnea ɛbɛyɛ a yɛbɛhyɛ toast ahorow a wotumi trɛw mu na wotumi hyɛ ho nkɔm ho nkuran no, yɛkamfo atiri ne nipadua kyerɛ. Toast headers use display: flex, ma kwan ma ɛyɛ mmerɛw sɛ wobɛhyehyɛ nsɛm no esiane yɛn margin ne flexbox utilities nti.

Toasts yɛ nea ɛyɛ mmerɛw sɛnea wuhia na enni markup kakraa bi pɛ a wɔhwehwɛ. Anyɛ yiye koraa no, yɛhwehwɛ element biako a ɛbɛma wo “toasted” nsɛm no ahyɛ mu na yɛhyɛ dismiss button ho nkuran denneennen.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Kane no, yɛn scripts no de dynamically de .hideadesuakuw no ka ho de toast bi sie koraa (a display:none, sen sɛ wode bɛka ho kɛkɛ opacity:0). Mprempren eyi ho nhia bio. Nanso, sɛnea ɛbɛyɛ a ɛbɛkɔ akyi no, yɛn script no bɛkɔ so ayɛ toggle class no (ɛwom mpo sɛ ɛho nhia ankasa de) kosi sɛ version titiriw a edi hɔ no bɛba.

Nhwɛso a ɛte ase

Klik bɔtn a ɛwɔ ase hɔ no so na kyerɛ toast (a wɔde yɛn utilities no asi hɔ wɔ ase nifa so) a wɔde asie default so.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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>

Yɛde JavaScript a edidi so yi di dwuma de kanyan yɛn live toast demo no:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translucent a ɛyɛ hann

Toasts yɛ translucent kakra ma ɛne nea ɛwɔ ase no afra.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Nneɛma a wɔde boaboa ano

Wubetumi de toast ahorow aboaboa ano denam toast ade a wode bɛkyekyere so, na ɛno bɛma ntam kwan bi aka ho tẽẽ.

Hwɛ? Te sɛ eyi ara pɛ.

Heads up, toasts bɛ stack automatically

html na ɛwɔ hɔ

<div class="toast-container position-static">
  <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>

Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ

Yɛ wo toasts no sɛnea wopɛ denam sub-components a wubeyi afi hɔ, tweaking wɔn ne utilities , anaasɛ w’ankasa markup a wode bɛka ho no so. Ɛha na yɛayɛ toast a ɛyɛ mmerɛw denam default no a yebeyi afi hɔ .toast-header, de ahyɛnsode a wɔde sie a wɔahyɛ da ayɛ afi Bootstrap Icons mu , ne flexbox utilities bi a yɛde bedi dwuma de asiesie nhyehyɛe no so.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Sɛnea ɛbɛyɛ a wubetumi ayɛ saa no, wubetumi nso de nneɛma foforo a wɔde di dwuma ne nneɛma a ɛwom aka toast ahorow ho.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Kɔla ahorow a wɔde yɛ nneɛma

Sɛ wode nhwɛso a ɛwɔ atifi hɔ no to hɔ a, wubetumi de yɛn kɔla ne akyi nneɛma a wɔde di dwuma no ayɛ toast kɔla ahorow. Ɛha na yɛde aka .text-bg-primary, .toastna afei yɛde aka .btn-close-whiteyɛn close button no ho. Sɛ wopɛ edge a ɛyɛ crisp a, yɛde default border no fi hɔ a .border-0.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

<div class="toast align-items-center text-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>

Nneɛma a wɔde bɛto hɔ

Fa toasts a CSS a wɔahyɛ da ayɛ no to hɔ sɛnea wuhia no. Wɔtaa de atifi nifa no di dwuma de bɔ amanneɛ, te sɛ nea ɛwɔ soro mfinimfini no. Sɛ wobɛkyerɛ toast biako pɛ wɔ bere koro mu a, fa gyinabea ahorow no hyɛ .toast.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Wɔ nhyehyɛe ahorow a ɛma amanneɛbɔ pii ba no, susuw ho sɛ wode wrapping element bedi dwuma sɛnea ɛbɛyɛ a wobetumi ayɛ mmerɛw sɛ wɔbɛboaboa ano.

Hwɛ? Te sɛ eyi ara pɛ.

Heads up, toasts bɛ stack automatically

html na ɛwɔ hɔ

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

Wubetumi nso anya fancy ne flexbox utilities de align toasts horizontally ne/anaasɛ vertically.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Nneɛma a wotumi nya

Wɔayɛ toasts sɛ ɛbɛyɛ nneɛma nketenkete a ɛbɛtwa wo nsrahwɛfo anaa wɔn a wɔde di dwuma no mu, enti sɛnea ɛbɛyɛ a wobɛboa wɔn a wɔwɔ screen reader ne mfiridwuma a ɛte saa a ɛboa no, ɛsɛ sɛ wode wo toasts no kyekyere aria-liveɔmantam bi mu . Nsakrae a ɛba wɔ mmeae a ɛte ase (te sɛ toast fã bi a wɔde gu mu/wɔyɛ no foforo) no, screen akenkanfo de wɔn ho to gua a enhia sɛ wɔde nea ɔde di dwuma no adwene si biribi so anaasɛ wɔde ɔkwan foforo so twa nea ɔde di dwuma no mu. Bio nso, ka ho aria-atomic="true"sɛ wobɛhwɛ ahu sɛ wɔde toast no nyinaa bɛto gua bere nyinaa sɛ ade biako (atomic), sen sɛ wobɛbɔ nea wɔasesa no ho amanneɛ kɛkɛ (a ebetumi de ɔhaw ahorow aba sɛ woyɛ toast no mu nsɛm no fã bi nkutoo foforo, anaasɛ sɛ woda toast no mu nsɛm koro no ara adi a wɔ bere bi akyi). Sɛ nsɛm a ehia no ho hia ma adeyɛ no, s.e., mfomso ahorow a wɔahyehyɛ wɔ kratasin bi mu a, ɛnde fa kɔkɔbɔ fã no di dwumammom sen sɛ wɔde toast bɛyɛ.

Hyɛ no nsow sɛ ɛsɛ sɛ live region no wɔ markup no mu ansa na wɔayɛ toast no anaasɛ wɔayɛ no foforo. Sɛ wode ahoɔden yɛ abien no nyinaa bere koro mu na wode gu kratafa no mu a, mpɛn pii no wɔremfa mfiridwuma a ɛboa mmɔ amanneɛ.

Ɛsɛ sɛ wosakra rolene aria-livelevel no nso gyina emu nsɛm no so. Sɛ ɛyɛ nkrasɛm a ɛho hia te sɛ mfomso a, fa role="alert" aria-live="assertive", anyɛ saa a fa role="status" aria-live="polite"su ahorow di dwuma.

Bere a nneɛma a worekyerɛ no sesa no, hwɛ hu sɛ wobɛma delaybere a wɔde ayɛ adwuma no ayɛ foforo sɛnea ɛbɛyɛ a wɔn a wɔde di dwuma no benya bere a ɛdɔɔso a wɔde bɛkenkan toast no.

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

Sɛ wode redi dwuma autohide: falsea, ɛsɛ sɛ wode close button bi ka ho na ama wɔn a wɔde di dwuma no atumi agyae toast no.

Hello, wiase! Eyi yɛ toast nkrasɛm.

html na ɛwɔ hɔ

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

Bere a mfiridwuma mu no ɛyɛ yiye sɛ wode focusable/actionable controls (te sɛ buttons anaa links foforo) bɛka wo toast no ho no, ɛsɛ sɛ wokwati sɛ wobɛyɛ eyi ama autohiding toasts. Sɛ mpo woma toast no bere tenten , delaykeyboard ne mmoa mfiridwuma a wɔde di dwuma no betumi ayɛ den sɛ wobedu toast no ho bere ano de ayɛ ho biribi (esiane sɛ toast ahorow no nnya adwene bere a wɔda no adi no). Sɛ ɛsɛ sɛ wunya nneɛma foforo a wode bedi so koraa a, yɛhyɛ nyansa sɛ fa toast a autohide: false.

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren toasts de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .toastma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass nsakrae ahorow

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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($black, .05);

Sɛnea wɔde di dwuma

Fa JavaScript so hyɛ toast ahorow ase:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Nneɛma a ɛkanyan adwene

Wobetumi de datasu a ɛwɔ bɔtn bi so wɔ toast no mu sɛnea wɔada no adi wɔ ase ha no ayɛ adwuma a wobeyi afi adwumam no:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

anaasɛ wɔ bɔtn bi a ɛwɔ toast no akyi a wɔde di dwuma data-bs-targetsɛnea wɔada no adi wɔ ase ha no:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
`animation`	boolean ho asɛm	`true`	Fa CSS fade nsakrae bi di dwuma wɔ toast no so.
`autohide`	boolean ho asɛm	`true`	Fa toast no sie ankasa bere a woakyɛ no akyi.
`delay`	nɔma	`5000`	Twentwɛn wo nan ase wɔ milisekɔn mu ansa na wode toast no asie.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

Ɔkwan	Nkyerɛmu
`dispose`	Ɛde element bi toast sie. Wo toast no bɛtena DOM no so nanso ɛrenkyerɛ bio.
`getInstance`	Static kwan a ɛma wo kwan ma wo nya toast instance a ɛbata DOM element bi ho. Sɛ nhwɛso no: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Ɛsan de Bootstrap toast nhwɛso bi ba.
`getOrCreateInstance`	Static kwan a ɛma wo kwan ma wo nya toast instance a ɛbata DOM element bi ho, anaasɛ wobɔ foforo, sɛ ɛba sɛ wɔanhyɛ ase a. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Sane de Bootstrap toast nhwɛso bi ba.
`hide`	Ɛde element bi toast sie. Ɛsan kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde toast no asie ankasa (kyerɛ sɛ ansa na `hidden.bs.toast`asɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi sɛ woyɛɛ `autohide`sɛ `false`.
`isShown`	Sane de boolean ba sɛnea toast no visibility tebea te.
`show`	Ɛda element bi toast adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ toast no ankasa (kyerɛ sɛ ansa na `shown.bs.toast`asɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi, mmom wo toast no renkyerɛ.

Nsɛm a esisi

Dwumadie	Nkyerɛmu
`hide.bs.toast`	Wɔtow saa adeyɛ yi ntɛm ara bere a `hide`wɔafrɛ instance kwan no.
`hidden.bs.toast`	Wɔtow saa adeyɛ yi bere a wɔde toast no asie nea ɔde di dwuma no awie no.
`show.bs.toast`	Saa adeyɛ yi tow ntɛm ara bere a `show`wɔfrɛ instance kwan no.
`shown.bs.toast`	Wɔtow saa adeyɛ yi bere a wɔama nea ɔde di dwuma no ahu toast no.

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