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.

<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="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var 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.

<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

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

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.

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

<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 .bg-primaryne .text-whiteahyɛ .toast, na 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.

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

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.

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

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

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

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

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

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

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

Sass

Nneɛma a Ɛsakra

$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($black, .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($black, .05);

Sɛnea wɔde di dwuma

Fa JavaScript so hyɛ toast ahorow ase:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-animation="".

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`	Auto sie toast no
`delay`	nɔma	`5000`	Twentwɛn toast no a wode besie no ase (ms) .

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 .

da no adi

Ɛ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.toastasɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi, mmom wo toast no renkyerɛ.

toast.show()

tɛ

Ɛ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.toastasɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi sɛ woyɛɛ autohidesɛ false.

toast.hide()

tow gu

Ɛde element bi toast sie. Wo toast no bɛtena DOM no so nanso ɛrenkyerɛ bio.

toast.dispose()

nyaNhwɛsode

Static kwan a ɛma wo kwan ma wo nya toast instance a ɛbata DOM element bi ho

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

nyaAnaasɛKyɛNhwɛso

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

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

Nsɛm a esisi

Adeyɛ no su	Nkyerɛmu
`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.
`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.

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