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.

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:

Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .
Toasts yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
Yɛsrɛ sɛ hyɛ no nsow sɛ w’asɛyɛde sɛ wode toast ahorow no si baabi.
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 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>

Translucent a ɛyɛ hann

Toasts nso yɛ nea ɛyɛ hann kakra, enti ɛfrafra wɔ biribiara a ebia ɛbɛda adi wɔ so no so. Wɔ browser ahorow a ɛboa backdrop-filterCSS agyapade no, yɛbɛbɔ mmɔden nso sɛ yɛbɛma nneɛma no ayɛ kusuu wɔ toast ase.

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

Nneɛma a wɔde boaboa ano

Sɛ wowɔ toasts pii a, yɛde default yɛ vertically stacking wɔn wɔ ɔkwan a wotumi kenkan so.

Hwɛ? Te sɛ eyi ara pɛ.

Heads up, toasts bɛ stack automatically

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

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.

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

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

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

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ɛ (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 wɔ bere bi a ɛba akyiri yi). 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 nsɛm a worekyerɛ no sesa no, hwɛ hu sɛ wobɛma bere a delaywɔde awie no ayɛ foforo na ama nkurɔfo anya bere a ɛdɔɔso a wɔde bɛkenkan toast no.

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

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-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 nneyɛe

Sɛnea wɔde di dwuma

Fa JavaScript so hyɛ toast ahorow ase:

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

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-, sɛnea ɛwɔ data-animation="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
animation a wɔde yɛ nneɛma	boolean ho asɛm	nokorɛ	Fa CSS fade nsakrae bi di dwuma wɔ toast no so
autohide	boolean ho asɛm	nokorɛ	Auto sie toast no
ka akyi	nɔma	`500`	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 .

`$().toast(options)`

Fa toast handler bata element ahorow a wɔaboaboa ano ho.

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

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

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

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

`.toast('dispose')`

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

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

Nsɛm a esisi

Nsɛm a Ɛsisii no Su	Nkyerɛmu
kyerɛ.bs.toast	Saa adeyɛ yi tow ntɛm ara bere a `show`wɔfrɛ instance kwan no.
wɔakyerɛ.bs.toast	Wɔtow saa adeyɛ yi bere a wɔama nea ɔde di dwuma no ahu toast no.
hide.bs.toast a wɔde hyɛ mu	Wɔtow saa adeyɛ yi ntɛm ara bere a `hide`wɔafrɛ instance kwan no.
ahintaw.bs.toast	Wɔtow saa adeyɛ yi bere a wɔde toast no asie nea ɔde di dwuma no awie no.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})