Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Paahtoleipää

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

Tällä sivulla

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:

  • Paahtoleipäät ovat valittavissa suorituskykysyistä, joten sinun on alustettava ne itse .
  • 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.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Aikaisemmin skriptimme lisäsivät .hideluokan dynaamisesti piilottaakseen paahtoleivän kokonaan (käteen display:none, ei vain -painikkeella opacity:0). Tämä ei ole enää tarpeen. Taaksepäin yhteensopivuuden vuoksi skriptimme jatkaa kuitenkin luokan vaihtamista (vaikka sille ei ole käytännön tarvetta) seuraavaan pääversioon asti.

Elävä esimerkki

Napsauta alla olevaa painiketta näyttääksesi paahtoleivän (joka on sijoitettu apuohjelmiemme oikeaan alakulmaan), joka on piilotettu oletuksena.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Käytämme seuraavaa JavaScriptiä live-toast-demon käynnistämiseen:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Läpikuultava

Paahtoleipä on hieman läpikuultava sulautuakseen alla olevaan.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Pinoaminen

Voit pinota paahtoleipää käärimällä ne paahtoleipäastiaan, mikä lisää pystysuunnassa väliä.

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Mukautettu sisältö

Mukauta maljojasi poistamalla alikomponentteja, säätämällä niitä apuohjelmilla tai lisäämällä omia merkintöjäsi. Tässä olemme luoneet yksinkertaisemman paahtoleivän poistamalla oletuskuvakkeen .toast-header, lisäämällä mukautetun piilotuskuvakkeen Bootstrap Iconsista ja käyttämällä joitain flexbox-apuohjelmia asettelun säätämiseen.

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Vaihtoehtoisesti voit myös lisätä lisäsäätimiä ja komponentteja paahtoleipiin.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Värimallit

Yllä olevan esimerkin pohjalta voit luoda erilaisia ​​paahtoleipien väriteemoja väri- ja taustaapuohjelmillamme . Tässä olemme lisänneet .text-bg-primary, .toastja sitten .btn-close-whitesulkemispainikkeeseen. Terävän reunan saamiseksi poistamme oletusreunuksen .border-0.

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

html 
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 vain, 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 myöhempänä ajankohtana). 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 , jotta käyttäjillä on tarpeeksi aikaa lukea malja.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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.

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Vaikka teknisesti on mahdollista lisätä tarkennettavia/toimivia säätimiä (kuten lisäpainikkeita tai linkkejä) paahtoleipääsi, sinun tulee välttää tämän tekemistä automaattisesti piilotettaessa paahtoleipää. Vaikka antaisit maljalle pitkän delayaikakatkaisun , näppäimistön ja aputekniikan käyttäjien voi olla vaikea saavuttaa malja ajoissa ryhtyäkseen toimenpiteisiin (koska maljat eivät tarkenna, kun ne näytetään). Jos sinulla on ehdottomasti oltava lisäsäätimiä, suosittelemme käyttämään paahtoleipää, jossa on autohide: false.

CSS

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa toastissa käytetään nyt paikallisia CSS-muuttujia .toasttehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass muuttujat

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Käyttö

Paahtoleipien alustaminen JavaScriptin avulla:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Liipaisimet

Irtisanominen voidaan saavuttaa maljan sisällä olevandata painikkeen attribuutilla, kuten alla on esitetty:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

tai painikkeella paahtoleivän ulkopuolella alla data-bs-targetkuvatulla tavalla:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Nimi Tyyppi Oletus Kuvaus
animation boolean true Käytä CSS-häivytystä maljassa.
autohide boolean true Piilota paahtoleipä automaattisesti viiveen jälkeen.
delay määrä 5000 Viive millisekunteina ennen paahtoleivän piilottamista.

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 .

Menetelmä Kuvaus
dispose Piilottaa elementin paahtoleivän. Paahtoleipäsi pysyy DOM:ssa, mutta ei enää näy.
getInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän toast-instanssin.
Esimerkki: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Palauttaa Bootstrap-toast-esiintymän.
getOrCreateInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän toast-instanssin tai luoda uuden, jos sitä ei alustettu.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Palauttaa Bootstrap-toast-esiintymän.
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.
isShown Palauttaa loogisen arvon toastin näkyvyystilan mukaan.
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.

Tapahtumat

Tapahtuma Kuvaus
hide.bs.toast Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
hidden.bs.toast Tämä tapahtuma käynnistyy, kun paahtoleipä on piilotettu käyttäjältä.
show.bs.toast Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
shown.bs.toast Tämä tapahtuma käynnistyy, kun paahtoleipä on tehty näkyväksi käyttäjälle. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})