Source

Röstsaid

Lükake oma külastajatele märguandeid röstsaiaga, kerge ja hõlpsasti kohandatava hoiatussõnumiga.

Röstsaad on kerged märguanded, mis on loodud mobiiltelefonide ja lauaarvutite operatsioonisüsteemide poolt populaarseks muutunud push-teavituste jäljendamiseks. Need on ehitatud flexboxiga, nii et neid on lihtne joondada ja positsioneerida.

Ülevaade

Asjad, mida röstsaia pistikprogrammi kasutamisel teada saada:

  • Kui loote meie JavaScripti allikast, nõuabutil.js see .
  • Röstsaid on tulemuslikkuse huvides lubatud, seega peate need ise lähtestama .
  • Pange tähele, et röstsaiade paigutamise eest vastutate teie.
  • Kui te seda ei määra, peidetakse röstsaiad automaatselt autohide: false.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Näited

Põhiline

Laiendatavate ja prognoositavate röstsaitide julgustamiseks soovitame kasutada päist ja keha. Röstsaa päised kasutavad display: flex, mis võimaldab tänu meie veerise ja flexboxi utiliitidele sisu hõlpsat joondamist.

Röstsaid on nii paindlikud kui vaja ja neil on väga vähe nõutavat juurdehindlust. Nõuame teie röstitud sisu sisaldama vähemalt ühte elementi ja soovitame tungivalt loobumisnupu kasutamist.

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

Läbipaistev

Ka röstsaiad on kergelt läbipaistvad, nii et need segunevad kõigega, mis neile võib paista. CSS-i atribuuti toetavate brauserite backdrop-filterpuhul proovime ka röstsaia all olevad elemendid hägustada.

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

Virnastamine

Kui teil on mitu röstsaia, virnastame need vaikimisi vertikaalselt loetaval viisil.

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

Paigutus

Asetage röstsaiad kohandatud CSS-iga vastavalt vajadusele. Ülemist paremat ülaosa kasutatakse sageli märguannete jaoks, nagu ka ülemist keskmist osa. Kui kavatsete näidata ainult ühte toosti korraga, asetage positsioneerimisstiilid otse .toast.

Bootstrap 11 minutit tagasi
Tere, Maailm! See on toosti sõnum. 
<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>

Süsteemide puhul, mis genereerivad rohkem teatisi, kaaluge ümbriselemendi kasutamist, et neid saaks hõlpsalt virnastada.

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

Flexboxi utiliitide abil saate röstsaiad horisontaalselt ja/või vertikaalselt joondada.

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

Juurdepääsetavus

Röstsaad on mõeldud külastajatele või kasutajatele väikesteks katkestusteks, nii et ekraanilugejate ja sarnaste abitehnoloogiatega inimeste abistamiseks peaksite oma toostid pakkima aria-livepiirkonnas . Ekraanilugejad teatavad reaalajas piirkondade muudatustest (nt röstsaia komponendi süstimine/värskendamine) automaatselt, ilma et oleks vaja kasutaja fookust liigutada või muul viisil kasutajat katkestada. Lisaks lisage aria-atomic="true"see tagamaks, et kogu röstsaia kuulutatakse alati välja ühe (aatomi) üksusena, mitte ei teatata, mida muudeti (mis võib põhjustada probleeme, kui värskendate ainult osa röstsaia sisust või kui kuvate sama röstsaia sisu hilisem ajahetk). Kui vajalik teave on protsessi jaoks oluline, nt vormi vigade loendi jaoks, kasutage hoiatuskomponentiröstsaia asemel.

Pange tähele, et reaalajas piirkond peab märgistuses olema enne röstsaia loomist või värskendamist. Kui genereerite mõlemad korraga dünaamiliselt ja sisestate need lehele, siis abitehnoloogiad neid üldjuhul ei teavita.

Samuti peate kohandama roleja aria-livetaset olenevalt sisust. Kui see on oluline teade, näiteks tõrge, kasutage role="alert" aria-live="assertive", muul juhul kasutage role="status" aria-live="polite"atribuute.

Kuvatava sisu muutudes värskendage kindlasti delayajalõpu , et inimestel oleks piisavalt aega toosti lugemiseks.

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

Kui kasutate autohide: false, peate lisama sulgemisnupu, et kasutajad saaksid röstsaiast loobuda.

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

JavaScripti käitumine

Kasutamine

Toostide lähtestamine JavaScripti kaudu:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi Tüüp Vaikimisi Kirjeldus
animatsioon tõeväärtus tõsi Rakendage röstsaiale CSS-i tuhmumise üleminek
automaatselt peita tõeväärtus tõsi Peida röstsai automaatselt
viivitus number 500 Viivitus röstsaia peitmisel (ms)

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

$().toast(options)

Kinnitab röstsaia käitleja elemendikogu külge.

.toast('show')

Paljastab elemendi röstsaia. Naaseb helistaja juurde enne, kui toosti on tegelikult näidatud (st enne shown.bs.toastsündmuse toimumist). Peate seda meetodit käsitsi kutsuma, selle asemel ei kuvata teie röstsaia.

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

.toast('hide')

Peidab elemendi röstsaia. Naaseb helistaja juurde enne, kui toost on tegelikult peidetud (st enne hidden.bs.toastsündmuse toimumist). Kui tegite selle meetodi, peate selle meetodi käsitsi autohidekutsuma false.

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

.toast('dispose')

Peidab elemendi röstsaia. Teie röstsai jääb DOM-i, kuid seda enam ei kuvata.

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

Sündmused

Sündmuse tüüp Kirjeldus
näita.bs.toost See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.röstsai See sündmus käivitatakse, kui toost on kasutajale nähtavaks tehtud.
peida.bs.röstsai See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.röstsai See sündmus käivitatakse, kui röstsai on kasutaja eest varjatud. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})