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 .
Tostoj aŭtomate kaŝos se vi ne specifigas autohide: false.
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.
Bootstrap
antaŭ 11 minutoj
Saluton mondo! Ĉi tio estas tosta mesaĝo.
Travidebla
Tostoj estas iomete diafanaj ankaŭ, do ili miksas super kio ajn ili povus aperi. Por retumiloj kiuj subtenas la backdrop-filterCSS-posedaĵon, ni ankaŭ provos malklarigi la elementojn sub rostpano.
Bootstrap
antaŭ 11 minutoj
Saluton mondo! Ĉi tio estas tosta mesaĝo.
Stakiĝo
Kiam vi havas plurajn tostojn, ni defaŭlte stakigas ilin vertikale en legebla maniero.
Bootstrap
ĵus nun
Vidu? Ĝuste tiel.
Bootstrap
antaŭ 2 sekundoj
Atentu, tostoj aŭtomate staplos
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.
Por sistemoj, kiuj generas pli da sciigoj, konsideru uzi envolvan elementon por ke ili povu facile stakiĝi.
Bootstrap
ĵus nun
Vidu? Ĝuste tiel.
Bootstrap
antaŭ 2 sekundoj
Atentu, tostoj aŭtomate staplos
Vi ankaŭ povas ŝati kun flexbox-ilaĵoj por vicigi rostpanojn horizontale kaj/aŭ vertikale.
Bootstrap
antaŭ 11 minutoj
Saluton mondo! Ĉi tio estas tosta mesaĝo.
Alirebleco
Tostoj celas esti malgrandaj interrompoj por viaj vizitantoj aŭ uzantoj, do por helpi tiujn kun ekranlegiloj kaj similaj helpaj teknologioj, vi devas envolvi viajn tostojn en aria-liveregionon . Ŝ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, inkludu aria-atomic="true"certigi, ke la tuta rostpano ĉiam estas anoncita kiel unuopa (atoma) unuo, anstataŭ anonci tion, kio estis ŝanĝita (kio povus konduki al problemoj se vi nur ĝisdatigas parton de la enhavo de la rostpano, aŭ se vi montros la saman rostpanon ĉe. pli posta tempo). Se la bezonataj informoj estas gravaj por la procezo, ekz. por listo de eraroj en formo, tiam uzu la atentigkomponentonanstataŭ rostpano.
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.
Ĉar la enhavo, kiun vi montras, ŝanĝas, nepre ĝisdatigu la delaytempon por certigi, ke homoj havas sufiĉe da tempo por legi la rostpanon.
Kiam vi uzas autohide: false, vi devas aldoni fermbutonon por permesi al uzantoj malakcepti la rostpanon.
Bootstrap
antaŭ 11 minutoj
Saluton mondo! Ĉi tio estas tosta mesaĝo.
JavaScript konduto
Uzado
Komencu tostojn per JavaScript:
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 .
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.
.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.
.toast('dispose')
Kaŝas rostpanon de elemento. Via rostpano restos sur la DOM sed ne montros plu.
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.