in English

Tostoj

Puŝu sciigojn al viaj vizitantoj per rostpano, malpeza kaj facile agordebla atentiga mesaĝo.

Tostoj estas malpezaj sciigoj dizajnitaj por imiti la puŝajn sciigojn popularigitaj de poŝtelefonaj kaj labortablaj operaciumoj. Ili estas konstruitaj per flexbox, do ili estas facile viceblaj kaj pozicieblaj.

Superrigardo

Aferoj sciindaj kiam vi uzas la rostpanon-kromaĵon:

  • Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .
  • Tostoj estas aligeblaj pro rendimentokialoj, do vi devas pravigi ilin mem .
  • Bonvolu noti, ke vi respondecas pri poziciigado de tostoj.
  • Tostoj aŭtomate kaŝos se vi ne specifigas autohide: false.
La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Ekzemploj

Baza

Por kuraĝigi etendeblajn kaj antaŭvideblajn tostojn, ni rekomendas kaplinion kaj korpon. Tostaj kaplinioj uzas display: flex, permesante facilan vicigon de enhavo danke al niaj marĝenaj kaj flekskesto-servaĵoj.

Tostoj estas tiel flekseblaj kiel vi bezonas kaj havas tre malmulte da bezonata markado. Minimume, ni postulas ununuran elementon por enhavi vian "tostitan" enhavon kaj forte kuraĝigas forĵeti butonon.

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

Vivu

Alklaku la suban butonon por montri rostpanon (poziciigitan kun niaj iloj en la malsupra dekstra angulo) kiu estis kaŝita defaŭlte per .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Travidebla

Tostoj estas iomete travideblaj por miksi kun kio estas sub ili.

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

Stakiĝo

Kiam vi havas plurajn tostojn, ni defaŭlte starigas ilin vertikale en legebla maniero.

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

Lokigo

Metu tostojn per kutima CSS laŭ via bezono. La supra dekstra estas ofte uzata por sciigoj, same kiel la supra mezo. Se vi iam nur montros unu rostpanon samtempe, metu la poziciajn stilojn ĝuste sur la .toast.

Bootstrap antaŭ 11 minutoj
Saluton mondo! Ĉi tio estas tosta mesaĝo. 
<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>

Por sistemoj, kiuj generas pli da sciigoj, konsideru uzi envolvan elementon por ke ili povu facile stakiĝi.

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

Vi ankaŭ povas ŝati kun flexbox-ilaĵoj por vicigi rostpanojn horizontale kaj/aŭ vertikale.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

Alirebleco

Tostoj intencas esti malgrandaj interrompoj por viaj vizitantoj aŭ uzantoj, do por helpi tiujn kun ekranlegiloj kaj similaj helpaj teknologioj, vi devus envolvi viajn tostojn en aria-liveregiono . Ŝanĝoj al vivaj regionoj (kiel ekzemple injektado/ĝisdatigado de rostpanokomponento) estas aŭtomate anoncitaj de ekranlegiloj sen neceso movi la fokuson de la uzanto aŭ alie interrompi la uzanton. Aldone, inkluzivu certigi, ke la tuta rostpano ĉiam estas anoncita kiel unuopa (atoma) unuo, prefere ol nur anonci tion, kio estis ŝanĝita (kio povus konduki al problemoj se vi nur ĝisdatigas parton de la enhavo de la rostpano aŭ se montros la saman rostpanon). en pli posta tempo). Se la bezonataj informoj estas gravaj por la procezo, ekz. por listo de eraroj en formo, tiam uzu la atentigkomponenton anstataŭ rostpano.aria-atomic="true"

Notu, ke la viva regiono devas ĉeesti en la markado antaŭ ol la rostpano estas generita aŭ ĝisdatigita. Se vi dinamike generas ambaŭ samtempe kaj injektas ilin en la paĝon, ili ĝenerale ne estos anoncitaj de helpaj teknologioj.

Vi ankaŭ devas adapti la rolekaj aria-livenivelon depende de la enhavo. Se temas pri grava mesaĝo kiel eraro, uzu role="alert" aria-live="assertive", alie uzu role="status" aria-live="polite"atributojn.

Dum la enhavo, kiun vi montras, ŝanĝas, nepre ĝisdatigu la delaytempon por ke uzantoj havu sufiĉe da tempo por legi la rostpanon.

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

Kiam vi uzas autohide: false, vi devas aldoni fermbutonon por permesi al uzantoj malakcepti la rostpanon.

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

Kvankam teknike eblas aldoni fokuseblajn/ageblajn kontrolojn (kiel aldonajn butonojn aŭ ligilojn) en via rostpano, vi devus eviti fari tion por aŭtomate kaŝantaj tostoj. Eĉ se vi donas al la rostpano longan delaytempon , uzantoj de klavaro kaj helpteknologio povas malfacile atingi la rostpanon ĝustatempe por ekagi (ĉar rostpanoj ne ricevas fokuson kiam ili estas montrataj). Se vi nepre devas havi pliajn kontrolojn, ni rekomendas uzi rostpanon kun autohide: false.

JavaScript konduto

Uzado

Komencu tostojn per JavaScript:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Nomo Tajpu Defaŭlte Priskribo
animacio bulea vera Apliki CSS-fade-transiron al la rostpano
aŭtomate kaŝi bulea vera Aŭtomate kaŝu la rostpanon
prokrasto nombro 500 Prokrasto kaŝi la rostpanon (ms)

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

$().toast(options)

Alligas rostpano-traktilon al elementkolekto.

.toast('show')

Rivelas elementon rostpanon. Revenas al la alvokanto antaŭ ol la rostpano efektive montriĝis (t.e. antaŭ ol la shown.bs.toastevento okazas). Vi devas permane voki ĉi tiun metodon, anstataŭe via rostpano ne aperos.

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

.toast('hide')

Kaŝas rostpanon de elemento. Revenas al la alvokanto antaŭ ol la rostpano efektive estis kaŝita (te antaŭ ol la hidden.bs.toastevento okazas). Vi devas permane voki ĉi tiun metodon se vi faris autohideal false.

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

.toast('dispose')

Kaŝas rostpanon de elemento. Via rostpano restos sur la DOM sed ne montros plu.

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

Eventoj

Eventa Tipo Priskribo
show.bs.toast Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata.bs.tosto Ĉi tiu evento estas lanĉita kiam la rostpano fariĝis videbla al la uzanto.
kaŝi.bs.toast Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita.bs.toast Ĉi tiu evento estas pafita kiam la rostpano finiĝis kaŝita de la uzanto. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})