Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

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

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

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

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

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

    toast.show()
  })
}

Permatomas

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

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>

Krovimas

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

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>

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

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>

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

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>

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 .text-bg-primaryprie mygtuko .toast, o tada įtraukėme .btn-close-whiteį uždarymo mygtuką. Kad kraštas būtų aiškus, numatytąją kraštinę pašaliname naudodami .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>

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

Bootstrap prieš 11 min
Labas pasauli! Tai tostas pranešimas.
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>

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

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>

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

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>

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.

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>

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.

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, tostai dabar naudoja vietinius CSS kintamuosius, .toastkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

  --#{$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 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:                $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);

Naudojimas

Inicijuoti tostus naudojant „JavaScript“:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Kadangi parinktis galima perduoti naudojant duomenų atributus arba „JavaScript“, galite pridėti parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="{value}". Perduodant parinktis per duomenų atributus , būtinai pakeiskite parinkties pavadinimo didžiosios raidės tipą iš „ camelCase “ į „ kebab-case “. Pavyzdžiui, naudokite data-bs-custom-class="beautifier"vietoj data-bs-customClass="beautifier".

Nuo 5.2.0 versijos „Bootstrap“ visi komponentai palaiko eksperimentinį rezervuotų duomenų atributą data-bs-config, kuriame galima laikyti paprastą komponento konfigūraciją kaip JSON eilutę. Kai elementas turi data-bs-config='{"delay":0, "title":123}'ir data-bs-title="456"atributus, galutinė titlereikšmė bus 456ir atskiri duomenų atributai nepaisys reikšmių, pateiktų data-bs-config. Be to, esamuose duomenų atributuose gali būti JSON reikšmės, pvz ., data-bs-delay='{"show":0,"hide":150}'.

vardas Tipas Numatytas apibūdinimas
animation loginis true Taikykite skrudintuvui CSS išnykimo perėjimą.
autohide loginis true Automatiškai paslėpti tostą po uždelsimo.
delay numerį 5000 Prieš paslėpdami tostą, delskite milisekundėmis.

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 .

Metodas apibūdinimas
dispose Paslepia elemento skrebučius. Jūsų skrudinta duona liks DOM, bet nebebus rodoma.
getInstance Statinis metodas, leidžiantis gauti tosto egzempliorių, susietą su DOM elementu.
Pavyzdžiui: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)grąžina Bootstrap tostą.
getOrCreateInstance Statinis metodas, leidžiantis gauti su DOM elementu susietą tosto egzempliorių arba sukurti naują, jei jis nebuvo inicijuotas.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Grąžina „Bootstrap“ tostą.
hide 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
isShown Grąžina loginį dydį pagal tosto matomumo būseną.
show 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.

Renginiai

Renginys apibūdinimas
hide.bs.toast Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
hidden.bs.toast Šis įvykis suaktyvinamas, kai tostas baigiamas paslėpti nuo vartotojo.
show.bs.toast Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
shown.bs.toast Šis įvykis suaktyvinamas, kai tostas tampa matomas vartotojui. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})