Tostai

Siųskite pranešimus savo lankytojams su skrebučiu, lengvu ir lengvai pritaikomu įspėjimo pranešimu.

Šiame puslapyje

Tostai yra lengvi pranešimai, skirti imituoti tiesioginius pranešimus, kuriuos išpopuliarino mobiliųjų ir stalinių kompiuterių operacinės sistemos. Jie pagaminti naudojant „flexbox“, todėl juos lengva išlygiuoti ir išdėstyti.

Apžvalga

Ką reikia žinoti naudojant „skrudinta duonos“ papildinį:

Tostai pasirenkami dėl našumo priežasčių, todėl turite patys juos inicijuoti .
Tostai bus automatiškai paslėpti, jei nenurodysite autohide: false.

Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

Pavyzdžiai

Pagrindinis

Siekdami paskatinti išplėstinius ir nuspėjamus tostus, rekomenduojame antraštę ir turinį. Naudojamos skrudintos antraštės display: flex, leidžiančios lengvai suderinti turinį dėl mūsų paraščių ir lanksčios dėžutės paslaugų.

Tostai yra tokie lankstūs, kiek jums reikia, ir turi labai mažai reikalingų žymėjimų. Reikalaujame bent vieno elemento, kuriame būtų jūsų „skrudintas“ turinys, ir primygtinai raginame atmesti mygtuką.

Labas pasauli! Tai tostas pranešimas.

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

Anksčiau mūsų scenarijai dinamiškai įtraukdavo .hideklasę, kad visiškai paslėptų tostą (su display:none, o ne tik su opacity:0). Dabar tai nebėra būtina. Tačiau dėl atgalinio suderinamumo mūsų scenarijus ir toliau perjungs klasę (net jei tai nėra praktinio poreikio) iki kitos pagrindinės versijos.

Gyvas pavyzdys

Spustelėkite toliau esantį mygtuką, kad būtų rodomas tostas (apatiniame dešiniajame kampe esantis mūsų paslaugų programoms), kuris pagal numatytuosius nustatymus buvo paslėptas.

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

Mes naudojame šį „JavaScript“, kad suaktyvintume tiesioginio tosto demonstraciją:

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

    toast.show()
  })
}

Permatomas

Skrebučiai yra šiek tiek permatomi, kad susimaišytų su tuo, kas yra po jais.

Labas pasauli! Tai tostas pranešimas.

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

Krovimas

Galite sukrauti skrebučius, suvynioję juos į skrudintuvą, kuris vertikaliai padidins tarpą.

Pamatyti? Būtent taip.

Dėmesio, skrebučiai bus kaupiami automatiškai

<div class="toast-container">
  <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>

Pasirinktinis turinys

Tinkinkite tostus pašalindami antrinius komponentus, pakoreguodami juos naudodami komunalines priemones arba pridėdami savo žymėjimą. Čia sukūrėme paprastesnį tostą, pašalindami numatytąjį .toast-header, pridėdami tinkintą slėpimo piktogramą iš „ Bootstrap Icons “ ir naudodami kai kurias „flexbox“ priemones , kad pakoreguotume išdėstymą.

Labas pasauli! Tai tostas pranešimas.

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

Arba galite pridėti papildomų valdiklių ir komponentų prie tostų.

Labas pasauli! Tai tostas pranešimas.

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

Spalvų schemos

Remdamiesi aukščiau pateiktu pavyzdžiu, galite sukurti skirtingas skrebučio spalvų schemas naudodami mūsų spalvų ir fono priemones. Čia mes pridėjome .bg-primaryir .text-whiteprie mygtuko „Uždaryti“ .toast, o tada .btn-close-white– prie uždarymo mygtuko. Kad kraštas būtų aiškus, numatytąją kraštinę pašaliname naudodami .border-0.

Labas pasauli! Tai tostas pranešimas.

<div class="toast align-items-center text-white 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>

Įdėjimas

Padėkite skrebučius naudodami tinkintą CSS, kai jų jums reikia. Viršutinė dešinė dažnai naudojama pranešimams, kaip ir viršutinis vidurys. Jei vienu metu ketinate rodyti tik vieną tostą, pozicionavimo stilius pateikite tiesiai ant .toast.

Labas pasauli! Tai tostas pranešimas.

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

Sistemoms, kurios generuoja daugiau pranešimų, apsvarstykite galimybę naudoti įvyniojimo elementą, kad juos būtų galima lengvai sukrauti.

Pamatyti? Būtent taip.

Dėmesio, skrebučiai bus kaupiami automatiškai

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

Taip pat galite pasimėgauti naudodami „flexbox“ įrankius, kad išlygintumėte tostus horizontaliai ir (arba) vertikaliai.

Labas pasauli! Tai tostas pranešimas.

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

Prieinamumas

Tostai skirti lankytojams ar naudotojams nedideliais trukdžiais, todėl norėdami padėti tiems, kurie naudojasi ekrano skaitytuvais ir panašiomis pagalbinėmis technologijomis, savo tostus turėtumėte apvynioti aria-liveregione . Ekrano skaitytuvai automatiškai praneša apie tiesioginių regionų pakeitimus (pvz., skrudinto komponento įšvirkštimą / atnaujinimą), nepertraukiant naudotojo dėmesio ar kitaip nepertraukiant jo. Be to, įtraukite aria-atomic="true", kad užtikrintumėte, jog visas skrebučiai visada būtų skelbiami kaip vienas (atominis) vienetas, o ne tik pranešama, kas buvo pakeista (dėl to gali kilti problemų, jei atnaujinsite tik dalį skrebučio turinio arba rodysite tą patį skrebučio turinį vėliau). Jei reikalinga informacija yra svarbi procesui, pvz., formos klaidų sąrašui, naudokite įspėjimo komponentąvietoj skrebučio.

Atminkite, kad aktyvus regionas turi būti žymėjime prieš generuojant arba atnaujinant tostą. Jei dinamiškai generuosite abu tuo pačiu metu ir įterpsite juos į puslapį, pagalbinės technologijos paprastai jų nepaskelbs.

Taip pat turite pritaikyti roleir aria-livelygį priklausomai nuo turinio. Jei tai svarbus pranešimas, pvz., klaida, naudokite role="alert" aria-live="assertive", kitu atveju naudokite role="status" aria-live="polite"atributus.

Keičiantis rodomam turiniui, būtinai atnaujinkite delayskirtąjį laiką , kad naudotojai turėtų pakankamai laiko perskaityti tostą.

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

Kai naudojate autohide: false, turite pridėti uždarymo mygtuką, kad naudotojai galėtų atsisakyti tostos.

Labas pasauli! Tai tostas pranešimas.

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

Nors techniškai galima pridėti fokusuojamus / veikiančius valdiklius (pvz., papildomus mygtukus ar nuorodas) į skrudintą duoną, neturėtumėte to daryti automatiškai slepiant tostus. Net jei duosite ilgą delayskirtąjį laiką , klaviatūros ir pagalbinių technologijų naudotojams gali būti sunku pasiekti tostą laiku, kad galėtų imtis veiksmų (nes tostai nesufokusuojami, kai jie rodomi). Jei būtinai turite turėti papildomų valdiklių, rekomenduojame naudoti skrebutį su autohide: false.

Sass

Kintamieji

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

Naudojimas

Inicijuoti tostus naudojant „JavaScript“:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Trigeriai

Atleidimas gali būti pasiektas naudojant tostodata mygtuko atributą, kaip parodyta toliau:

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

arba ant skrudintos duonos ribų esančio mygtuko , naudojant data-bs-targetkaip parodyta toliau:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="".

vardas	Tipas	Numatytas	apibūdinimas
`animation`	loginis	`true`	Taikykite skrudintuvui CSS išnykimo perėjimą
`autohide`	loginis	`true`	Automatiškai paslėpkite skrebutį
`delay`	numerį	`5000`	Tostos slėpimo atidėjimas (ms)

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .

Rodyti

Atskleidžia elemento skrebučius. Grįžta pas skambinantįjį, kol tostas dar nebuvo parodytas (ty prieš shown.bs.toastįvykį). Turite neautomatiškai iškviesti šį metodą, o tostas nebus rodomas.

toast.show()

paslėpti

Paslepia elemento skrebučius. Grąžina skambinančiajam, kol tostas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.toastįvykį). Turite rankiniu būdu iškviesti šį metodą , jei padarėte autohide.false

toast.hide()

disponuoti

Paslepia elemento skrebučius. Jūsų skrudinta duona liks DOM, bet nebebus rodoma.

toast.dispose()

getInstance

Statinis metodas, leidžiantis gauti tosto egzempliorių, susietą su DOM elementu

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Statinis metodas, leidžiantis gauti su DOM elementu susietą tosto egzempliorių arba sukurti naują, jei jis nebuvo inicijuotas

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Renginiai

Renginio tipas	apibūdinimas
`show.bs.toast`	Šis įvykis suaktyvinamas iš karto, kai `show`iškviečiamas egzemplioriaus metodas.
`shown.bs.toast`	Šis įvykis suaktyvinamas, kai tostas tampa matomas vartotojui.
`hide.bs.toast`	Šis įvykis suaktyvinamas iš karto, kai `hide`iškviečiamas egzemplioriaus metodas.
`hidden.bs.toast`	Šis įvykis suaktyvinamas, kai tostas baigiamas paslėpti nuo vartotojo.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})