in English

Toasts

Push zviziviso kune vashanyi vako ine toast, yakareruka uye inogoneka nyore yambiro meseji.

Toasts zviziviso zvakareruka zvakagadzirirwa kutevedzera zviziviso zvepush izvo zvakafarirwa nenharembozha uye desktop inoshanda masisitimu. Iwo akavakwa neflexbox, saka ari nyore kurongedza uye chinzvimbo.

Overview

Zvinhu zvekuziva kana uchishandisa toast plugin:

  • Kana iwe uri kuvaka yedu JavaScript kubva kunobva, inodautil.js .
  • Toasts inosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
  • Ndokumbira utarise kuti ndiwe une basa rekuisa toast.
  • Toasts inongozvivanza kana ukasatsanangura autohide: false.
Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Mienzaniso

Basic

Kuti tikurudzire ma toast anowedzera uye anofano zivikanwa, tinokurudzira musoro nemuviri. Toast misoro inoshandisa display: flex, ichibvumira kurongeka kuri nyore kwemukati nekuda kwemargin uye flexbox zvishandiso.

Toasts anochinjika sezvaunoda uye ane mashoma anodiwa markup. Zvirinani, isu tinoda chinhu chimwe chete kuti chive nezvako "zvakaomeswa" uye kukurudzira zvakasimba bhatani rekudzinga.

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

Rarama

Dzvanya bhatani riri pazasi kuratidza toast (yakamisikidzwa nezvishandiso zvedu pakona yekurudyi) iyo yakavanzwa nekusarudzika ne .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translucent

Toasts anopenya zvishoma kuti asanganise nezviri pazasi pawo.

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

Stacking

Kana iwe uine ma toast akawanda, isu tinongomira kuamisa akatwasuka nenzira inoverengeka.

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

Placement

Isa ma toast ane tsika CSS sezvaunoda iwo. Kurudyi kwepamusoro kunowanzo shandiswa pazviziviso, sezvakaita wepakati wepamusoro. Kana uchizongoratidza tositi imwe chete panguva, isa zvitaera zvekumisikidza ipapo chaipo .toast.

Bootstrap 11 mins yapfuura
Mhoro, nyika! Iri ishoko re toast. 
<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>

Kune masisitimu anogadzira zviziviso zvakawanda, funga kushandisa chinhu chekuputira kuti zvigone kurongedza zviri nyore.

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

Iwe unogona zvakare kuwana fancy neflexbox utilities kuti uenzanise toasts yakatwasuka uye/kana yakatwasuka.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

Accessibility

Toasts inoitirwa kuve kukanganisa kudiki kune vashanyi vako kana vashandisi, saka kubatsira avo vane skrini yekuverenga uye yakafanana tekinoroji yekubatsira, unofanirwa kuputira ma toast ako aria-livemunharaunda . Shanduko kumatunhu anogara (sekubaya jekiseni / kuvandudza chikamu chetositi) anoziviswa otomatiki nevaverengi vescreen pasina chikonzero chekufambisa chinotariswa nemushandisi kana kukanganisa mushandisi. Pamusoro pezvo, sanganisira aria-atomic="true"kuve nechokwadi chekuti toast yese inogara ichiziviswa sechinhu chimwe chete (atomic) unit, pane kungozivisa zvakachinjwa (izvo zvinogona kuunza matambudziko kana iwe ukangogadzirisa chikamu cheiyo toast zvirimo, kana kuratidza zvakafanana zvirimo. munguva inotevera). Kana ruzivo rwuri kudiwa rwakakosha pakuita, semuenzaniso kune rondedzero yezvikanganiso mufomu, zvino shandisa chikamu chekuzivisa .panzvimbo yetoast.

Ziva kuti nharaunda mhenyu inoda kuvepo mumarkup isati yagadzirwa kana kuvandudzwa. Kana iwe ukagadzira zvese zviri zviviri panguva imwe chete uye wozvipinza mupeji, hazviwanzo kuziviswa neanobatsira matekinoroji.

Iwe zvakare unofanirwa kugadzirisa iyo roleuye aria-livenhanho zvichienderana nezviri mukati. Kana iri meseji yakakosha senge kukanganisa, shandisa role="alert" aria-live="assertive", kana zvisina kudaro shandisa role="status" aria-live="polite"hunhu.

Sezvo zvirimo zvauri kuratidza zvachinja, ita chokwadi chekugadzirisa delaynguva yekubuda kuitira kuti vashandisi vawane nguva yakakwana yekuverenga toast.

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

Paunenge uchishandisa autohide: false, iwe unofanirwa kuwedzera bhatani rekuvhara kuti ubvumire vashandisi kudzinga toast.

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

Nepo tekinoroji zvichikwanisika kuwedzera zvinotariswa/zvinoita zvidzoreso (zvakadai semamwe mabhatani kana zvinongedzo) mune yako toast, iwe unofanirwa kudzivirira kuita izvi kune autohiding toasts. Kunyangwe iwe ukapa toast nguva yakareba delay, vashandisi vekhibhodi uye yekubatsira tekinoroji vangaomerwa nekusvika kune toast nenguva kutora chiito (sezvo toast isingagamuchire kutarisa kana ichiratidzwa). Kana iwe uchifanirwa kuve nekumwe kutonga, tinokurudzira kushandisa toast ine autohide: false.

JavaScript maitiro

Usage

Tanga toasts kuburikidza neJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Zita Type Default Tsanangudzo
animation boolean chokwadi Isa CSS fade shanduko kune toast
autohide boolean chokwadi Auto viga toast
delay nhamba 500 Kunonoka kuvanza toast (ms)

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

$().toast(options)

Inosungirira mubato wetoast kune muunganidzwa wezvinhu.

.toast('show')

Inoratidza toast yechinhu. Inodzokera kumunhu anodaidzira isati yanyatsoratidzwa (kureva kuti shown.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira, pachinzvimbo chako toast hairatidze.

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

.toast('hide')

Inovanza toast yechimwe chinhu. Inodzokera kumunhu anodaidzira isati yanyatsovanzwa (kureva kuti hidden.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira kana iwe wakaita autohideku false.

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

.toast('dispose')

Inovanza toast yechimwe chinhu. Toast yako icharamba iri paDOM asi haicharatidzike zvakare.

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

Zviitiko

Chiitiko Type Tsanangudzo
show.bs.toast Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
kuratidzwa.bs.toast Ichi chiitiko chinodzingwa kana toast yaitwa kuti ionekwe kumushandisi.
hide.bs.toast Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
zvakavanzika.bs.toast Ichi chiitiko chinodzingwa kana toast yapedza kuvanzwa kubva kumushandisi. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})