Source

Tostai

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

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

  • Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
  • Tostai pasirenkami dėl našumo priežasčių, todėl turite patys juos inicijuoti .
  • Atminkite, kad jūs esate atsakingi už tostų išdėstymą.
  • 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šplečiamus 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ą.

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

Permatomas

Skrudinukai taip pat yra šiek tiek permatomi, todėl susilieja su tuo, kas gali pasirodyti. Naršyklėse, palaikančiose backdrop-filterCSS nuosavybę, taip pat bandysime sulieti elementus po tostu.

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

Krovimas

Kai turite kelis skrebučius, pagal numatytuosius nustatymus juos sudėliojame vertikaliai taip, kad jie būtų skaitomi.

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

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

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

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

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

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

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 vartotojo. Be to, įtraukite aria-atomic="true", kad užtikrintumėte, jog visas skrebučiai visada būtų skelbiami kaip vienas (atominis) vienetas, o ne pranešama, kas buvo pakeista (dėl to gali kilti problemų, jei atnaujinsite tik dalį skrudintos duonos turinio arba jei tą patį skrebučio turinį rodysite adresu vėlesnis laiko momentas). 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 žmonės turėtų pakankamai laiko perskaityti tostą.

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

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

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

Naudojimas

Inicijuoti tostus naudojant „JavaScript“:

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

Galimybės

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

vardas Tipas Numatytas apibūdinimas
animacija loginis tiesa Tostui pritaikykite CSS išnykimo perėjimą
automatiškai pasislėpti loginis tiesa Automatiškai paslėpkite skrebutį
uždelsimas numerį 500 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 .

$().toast(options)

Prie elementų kolekcijos pritvirtina skrudintuvą.

.toast('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.

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

.toast('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

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

.toast('dispose')

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

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

Renginiai

Renginio tipas apibūdinimas
rodyti.bs.skrudinta duona Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.skrudinta duona Šis įvykis suaktyvinamas, kai tostas tampa matomas vartotojui.
paslėpti.bs.skrudinta duona Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.skrudinta duona Šis įvykis suaktyvinamas, kai tostas baigiamas paslėpti nuo vartotojo. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})