Source

Paahtoleipää

Välitä ilmoituksia vierailijoille maljalla, kevyellä ja helposti muokattavalla hälytysviestillä.

Toastit ovat kevyitä ilmoituksia, jotka on suunniteltu jäljittelemään push-ilmoituksia, joita mobiili- ja työpöytäkäyttöjärjestelmät ovat suosineet. Ne on rakennettu flexboxilla, joten ne on helppo kohdistaa ja sijoittaa.

Yleiskatsaus

Asiat, jotka sinun tulee tietää käytettäessä toast-laajennusta:

  • Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js .
  • Paahtoleipäät ovat valittavissa suorituskykysyistä, joten sinun on alustettava ne itse .
  • Huomaa, että olet vastuussa paahtoleipien sijoittamisesta.
  • Toast piilotetaan automaattisesti, jos et määritä autohide: false.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Esimerkkejä

Perus

Suosittelemme otsikkoa ja runko-osaa pidennettävien ja ennustettavien maljojen kannustamiseksi. Toast-otsikot käyttävät display: flex, mikä mahdollistaa sisällön helpon kohdistamisen marginaali- ja flexbox-apuohjelmiemme ansiosta.

Toast ovat niin joustavia kuin tarvitset, ja niissä on hyvin vähän vaadittuja merkintöjä. Vaadimme vähintään yhden elementin sisältämään "paahdetun" sisällön ja suosittelemme voimakkaasti hylkäämispainiketta.

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

Paahtoleivät ovat myös hieman läpikuultavia, joten ne sekoittuvat kaiken päälle, minkä päälle ne saattavat näyttää. CSS -ominaisuutta tukevissa selaimissa backdrop-filteryritämme myös sumentaa elementit maljan alla.

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

Pinoaminen

Kun sinulla on useita paahtoleipiä, oletuksena pinoamme ne pystysuunnassa luettavalla tavalla.

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

Sijoitus

Aseta paahtoleipää mukautetulla CSS:llä tarpeen mukaan. Oikeaa yläkulmaa käytetään usein ilmoituksiin, kuten myös keskimmäistä yläkulmaa. Jos aiot näyttää vain yhden maljan kerrallaan, aseta sijoittelutyylit suoraan .toast.

Bootstrap 11 minuuttia sitten
Hei maailma! Tämä on maljaviesti. 
<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>

Jos järjestelmä tuottaa enemmän ilmoituksia, harkitse kääreelementin käyttöä, jotta ne voivat pinota helposti.

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

Flexbox-apuohjelmilla voit myös kohdistaa paahtoleipää vaaka- ja/tai pystysuunnassa.

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

Esteettömyys

Paahtoleipien on tarkoitus olla pieniä häiriöitä vierailijoille tai käyttäjille, joten näytönlukuohjelmien ja vastaavien aputekniikoiden käyttäjiä varten sinun tulee kääriä maljasi aria-livealueelle . Näytönlukijat ilmoittavat reaaliaikaisten alueiden muutoksista (kuten paahtoleipäkomponentin lisääminen/päivitys) automaattisesti ilman, että käyttäjän tarvitsee siirtää tarkennusta tai muuten keskeyttää käyttäjää. Lisää aria-atomic="true"myös varmistaaksesi, että koko paahtoleipä ilmoitetaan aina yhtenä (atomi)yksikkönä sen sijaan, että ilmoitat, mitä on muutettu (mikä voi johtaa ongelmiin, jos päivität vain osan paahtoleivän sisällöstä tai jos näytät saman paahtoleivän sisällön osoitteessa myöhempi ajankohta). Jos tarvittavat tiedot ovat tärkeitä prosessille, esim. lomakkeen virheluetteloa varten, käytä hälytyskomponenttiapaahtoleivän sijasta.

Huomaa, että live-alueen on oltava mukana merkinnöissä ennen kuin paahtoleipä luodaan tai päivitetään. Jos luot molemmat dynaamisesti samanaikaisesti ja lisäät ne sivulle, aputekniikat eivät yleensä ilmoita niistä.

Sinun on myös mukautettava roleja aria-livetasoa sisällön mukaan. Jos se on tärkeä viesti, kuten virhe, käytä role="alert" aria-live="assertive", muussa tapauksessa role="status" aria-live="polite"määritteitä.

Kun näytettävä sisältö muuttuu, muista päivittää delayaikakatkaisu varmistaaksesi, että ihmisillä on tarpeeksi aikaa lukea malja.

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

Kun käytät autohide: false, sinun on lisättävä sulkemispainike, jotta käyttäjät voivat hylätä paahtoleivän.

<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-käyttäytyminen

Käyttö

Paahtoleipien alustaminen JavaScriptin avulla:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

Nimi Tyyppi Oletus Kuvaus
animaatio boolean totta Käytä CSS-häivytystä maljassa
piilottaa automaattisesti boolean totta Piilota paahtoleipä automaattisesti
viive määrä 500 Viive paahtoleivän piilottamisessa (ms)

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

$().toast(options)

Kiinnittää paahtoleivän käsittelijän elementtikokoelmaan.

.toast('show')

Paljastaa elementin paahtoleivän. Palaa soittajalle ennen kuin malja on todella esitetty (eli ennen shown.bs.toasttapahtumaa). Sinun on kutsuttava tämä menetelmä manuaalisesti, sen sijaan paahtoleipäsi ei näy.

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

.toast('hide')

Piilottaa elementin paahtoleivän. Palaa soittajalle ennen kuin malja on todella piilotettu (eli ennen hidden.bs.toasttapahtumaa). Sinun on kutsuttava tämä menetelmä manuaalisesti, jos olet autohidetehnyt false.

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

.toast('dispose')

Piilottaa elementin paahtoleivän. Paahtoleipäsi pysyy DOM:ssa, mutta ei enää näy.

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

Tapahtumat

Tapahtumatyyppi Kuvaus
näytä.bs.paahtoleipä Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
näytetään.bs.paahtoleipä Tämä tapahtuma käynnistyy, kun paahtoleipä on tehty näkyväksi käyttäjälle.
hide.bs.toast Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu.bs.paahtoleipä Tämä tapahtuma käynnistyy, kun paahtoleipä on piilotettu käyttäjältä. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})