Tositiw bɛ kɛ

Aw bɛ kunnafoniw gɛlɛya aw ka taamakɛlaw ma ni tositi ye, lasɔmini cikan min ka nɔgɔn ani min bɛ se ka ladilan nɔgɔya la.

Nin ɲɛ in kan

Tositiw ye kunnafoni nɔgɔmanw ye minnu dilannen don walasa ka push kunnafoniw ladege minnu kɛra fɛn ye min diyara mobili ni tabali baarakɛminɛnw ye. U bɛ jɔ ni flexbox ye, o la u labɛncogo n’u jɔyɔrɔ ka nɔgɔn.

Kuma bɛɛ lajɛlen

Fɛn minnu ka kan ka dɔn ni i bɛ baara kɛ ni tositi plugin ye:

Tositiw ye opt-in ye baarakɛcogo kunw kosɔn, o la aw yɛrɛ ka kan k’u daminɛ .
Tositiw bɛna dogo u yɛrɛma ni aw ma a jira autohide: false.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Misaliw

Kunfɔlɔ

Walasa ka dusu don tobilikɛminɛnw kɔnɔ minnu bɛ se ka bonya ani minnu bɛ se ka fɔ ka ɲɛ, an bɛ kuncɛ ni farikolo dɔ laadi. Toast headers use display: flex, min bɛ sira Di kɔnɔkow labɛncogo nɔgɔman ma k’a sababu Kɛ an ka margin ni flexbox nafalanw ye.

Tositiw bɛ se ka wuli ka bɔ u nɔ na i n’a fɔ i mago bɛ cogo min na ani u ka taamasiyɛn wajibiyalenw ka dɔgɔ kosɛbɛ. A dɔgɔyalenba la, an bɛ fɛn kelen de wajibiya walasa k’i ka “tositi” kɔnɔkow mara ani ka dusu don kosɛbɛ ka bɔ baara la.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Fɔlɔ, an ka sɛbɛnniw tun bɛ .hidekalan fara ɲɔgɔn kan ni fanga ye walasa ka tositi dɔ dogo pewu (ni display:none, sanni ka kɛ ni dɔrɔn ye opacity:0). O tɛ wajibi ye sisan tugun. Nka, kɔfɛ-baarakɛcogo la, an ka sɛbɛnni bɛna t’a fɛ ka kalasi wuli-wuli (hali n’a mago tɛ a la waleyali la) fo ka se a bɔkoba nata ma.

Misali ɲɛnama

Butɔn digi min bɛ duguma walasa ka tositi dɔ jira (a sigilen bɛ ni an ka nafamafɛnw ye duguma kininbolo fɛ) min dogolen bɛ a daminɛ na.

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>

An bɛ baara kɛ ni nin JavaScript ye walasa k’an ka live toast demo daminɛ:

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

    toast.show()
  })
}

Translucent ye

Tositiw bɛ yeelen bɔ dɔɔni walasa ka u fara ɲɔgɔn kan ni min bɛ u jukɔrɔ.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Stacking (Sɔrɔdasi).

Aw bɛ se ka tobilikɛminɛnw fara ɲɔgɔn kan ni aw ye u siri tobilikɛminɛn kɔnɔ, o bɛna yɔrɔ dɔw fara ɲɔgɔn kan tilennen.

Ka ye? I n’a fɔ nin dɔrɔn.

Kungolow bɛ wuli, tositiw bɛna ɲɔgɔn dalajɛ u yɛrɛma

html ye

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

Kɔnɔkow minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

Aw ye aw ka tositiw kɛ ka kɛɲɛ ni aw yɛrɛ sago ye ni aw bɛ sub-components bɔ, ka u sɛgɛsɛgɛ ni utilités ye , walima ka aw yɛrɛ ka markup fara a kan. Yan an ye tositi nɔgɔman dɔ Dabɔ ni default (dafalen) bɔli ye .toast-header, ka custom dogo taamasiyɛn dɔ Fàra Bootstrap Icons kan , ani ka baara Kɛ ni flexbox nafama dɔw ye walasa ka layout (labɛncogo) Labɛn.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Ni o tɛ, aw bɛ se fana ka kunnafoni wɛrɛw ni fɛn wɛrɛw fara tobilikɛminɛnw kan.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Kulɛriw cogoyaw

Ka da misali kan min fɔra sanfɛ, i bɛ se ka tositi kulɛri suguya wɛrɛw dilan ni an ka kulɛri ni kɔkanna nafalanw ye. Yan an ye dɔ Fàra .text-bg-primary, .toasto kɔ fɛ an ye dɔ Fàra .btn-close-whitean ka dakun dakun kan. Walasa ka edge crisp sɔrɔ, an bɛ danyɔrɔ dafalen bɔ ni .border-0.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Yɔrɔ bilali

Aw bɛ tositiw bila ni CSS ladamulen ye i n’a fɔ aw mago bɛ u la cogo min na. Sanfɛ kininbolo bɛ kɛ tuma caman na kunnafoniw kama, i n’a fɔ sanfɛla cɛmancɛ. Ni aw bɛna tositi kelen dɔrɔn jira don dɔ la a waati kelen na, aw bɛ jɔyɔrɔfacogow bila .toast.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Sitimɛw kama minnu bɛ kunnafoni caman dilan, aw bɛ aw hakili to baara kɛli la ni fɛn dɔ ye min bɛ kɛ ka fɛnw siri walasa u ka se ka ɲɔgɔn lajɛ nɔgɔya la.

Ka ye? I n’a fɔ nin dɔrɔn.

Kungolow bɛ wuli, tositiw bɛna ɲɔgɔn dalajɛ u yɛrɛma

html ye

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

Aw bɛ se fana ka fansi sɔrɔ ni flexbox utilités ye walasa ka tositiw labɛn ka ɲɛ ani/walima cogo tilennen na.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Seko ni dɔnko

Tositiw dabɔra ka kɛ tigɛda misɛnninw ye i ka taamakɛlaw walima i ka baarakɛlaw fɛ, o la walasa ka mɔgɔ minnu dɛmɛ ni ɛkran kalanbagaw ye ani o ɲɔgɔnna dɛmɛnanw, aw ka kan k’aw ka tositiw siri aria-livemara dɔ kɔnɔ . Yɛlɛma minnu bɛ kɛ mara ɲɛnamaw la (i n’a fɔ tositi yɔrɔ dɔ pikiri/k’a ladamuni) bɛ laseli kɛ u yɛrɛma ɛkran kalanbagaw fɛ k’a sɔrɔ u ma kɛ wajibi ye ka baarakɛla ka ɲɛmajɔli lamaga walima ka baarakɛla tigɛ cogo wɛrɛ la. Ka fara o kan, aw bɛ a fara a kan aria-atomic="true"walasa ka a jira ko tositi bɛɛ bɛ laseli kɛ tuma bɛɛ i n’a fɔ yɔrɔ kelen (atomiki), sanni aw ka fɛn min Changé (o bɛ se ka na ni gɛlɛyaw ye ni aw ye tositi kɔnɔfɛn yɔrɔ dɔ dɔrɔn de kuraya, walima ni aw bɛ tositi kɔnɔfɛn kelen jira waati wɛrɛ la). Ni kunnafoni minnu ka kan ka kɛ, olu nafa ka bon baarakɛcogo la, misali la, filiw lisɛli sɛbɛn dɔ kɔnɔ, o tuma na, baara kɛ ni lasɔmini yɔrɔ yetositi nɔ na.

A kɔlɔsi ko mara ɲɛnama ka kan ka kɛ taamasiyɛn na sani tositi ka dilan walima ka a kuraya. N'i ye u fla bɛɛ Lawuli ni fanga ye waati kelen na k'u pikiri ɲɛ kan, a ka c'a la, u tɛna Laseli dɛmɛ-fɛɛrɛw fɛ.

Aw ka kan fana ka ladilan roleani aria-livenivo ka kɛɲɛ ni kɔnɔkow ye. Ni cikan nafama don i n’a fɔ fili, baara kɛ ni role="alert" aria-live="assertive", n’o tɛ baara kɛ ni role="status" aria-live="polite"fɛnw ye.

Ni i bɛ kunnafoni minnu jira, olu bɛ Changé, i janto ka delaywaati dafalen kuraya walasa baarakɛlaw ka waati bɛrɛ sɔrɔ ka tositi kalan.

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

Ni aw bɛ baara kɛ ni autohide: false, aw ka kan ka butɔni dɔ fara a kan walasa baarakɛlaw ka se ka tobilikɛminɛn bila.

Bonjour, diɲɛ! Nin ye tositi cikan ye.

html ye

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

Hali ni fɛɛrɛko siratigɛ la, a bɛ se ka kɛ ka kunnafoni dɔw fara a kan minnu bɛ se ka sinsin/wale kɛ (i n’a fɔ butɔni wɛrɛw walima jɛgɛnsira wɛrɛw) i ka tobilikɛminɛnw na, aw ka kan k’aw yɛrɛ tanga o kɛli ma tobilikɛminɛnw dogolenw na. Hali n’i ye waati jan di tositi ma delay, klaviyeti ni dɛmɛnanw baarakɛlaw bɛ se ka gɛlɛya sɔrɔ ka se tositi ma waati kɔnɔ walasa ka fɛɛrɛ tigɛ (k’a masɔrɔ tobilikɛminɛnw tɛ fosi sɔrɔ n’u jirala). Ni aw ka kan ka kunnafoni wɛrɛw sɔrɔ tigitigi, an bɛ a fɔ aw ye ko aw ka tositi kɛ ni autohide: false.

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli ka bɔ a nɔ na, tositiw bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .toastwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

$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);

Baarakɛcogo

Tositiw daminɛni JavaScript fɛ:

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

Fɛn minnu bɛ mɔgɔ bila ka baara kɛ

Bɔli bɛ se ka sɔrɔ ni fɛn dataye min bɛ butɔni dɔ kan tobilikɛminɛn kɔnɔ i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

walima butɔni dɔ kan tobilikɛminɛn kɔkan ni aw bɛ baara kɛ ni a ye data-bs-targeti n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
`animation`	boolean ye	`true`	Aw bɛ CSS fade transition dɔ kɛ toast kan.
`autohide`	boolean ye	`true`	Aw bɛ tobilikɛminɛn dogo aw yɛrɛma o latɛmɛnen kɔfɛ.
`delay`	nimɔrɔ	`5000`	Aw bɛ a bila kɔfɛ milisekɔndi kɔnɔ sani aw ka tobilikɛminɛn dogo.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

Kɛcogo	Cogojirali
`dispose`	A bɛ element dɔ ka tositi dogo. Aw ka tositi bɛna to DOM kan nka a tɛna jira tugun.
`getInstance`	Static method min b’a to i bɛ se ka toast instance sɔrɔ min bɛ tali kɛ DOM element dɔ la. Misali la: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`A bɛ Bootstrap toast misali dɔ segin.
`getOrCreateInstance`	Static method min b’a To i bɛ se ka toast instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ, n’a sɔrɔla a ma Daminɛ. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`A bɛ Bootstrap toast misali dɔ segin.
`hide`	A bɛ element dɔ ka tositi dogo. A bɛ segin welebaga ma sani tobili ka dogo tiɲɛ na (o kɔrɔ ye ko sani `hidden.bs.toast`ko ka kɛ). Aw ka kan ka nin fɛɛrɛ in wele ni bolo ye ni aw ye a kɛ `autohide`ka `false`.
`isShown`	A bɛ boolean dɔ Segin ka Kɛɲɛ ni tositi yecogo cogoya ye.
`show`	A bɛ element dɔ ka tositi jira. A bɛ segin welebaga ma sani tobili ka jira tiɲɛ na (o kɔrɔ ye ko sani `shown.bs.toast`ko ka kɛ). Aw ka kan ka nin fɛɛrɛ in wele ni bolo ye, o nɔ na aw ka tositi tɛna jira.

Ko minnu kɛra

Lajɛrɛ	Cogojirali
`hide.bs.toast`	O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni `hide`misali fɛɛrɛ Weelera.
`hidden.bs.toast`	O ko in bɛ Fɔ ni tobilikɛminɛn dogolen Dònna baarakɛla la.
`show.bs.toast`	O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni `show`misali fɛɛrɛ Weelela.
`shown.bs.toast`	O ko in bɛ Fɔ ni tobilikɛminɛn in Kɛra baarakɛla ye min bɛ Ye.

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