Source

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, zvinodautil.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 kuwedzera uye kufungidzira toasts, tinokurudzira musoro uye muviri. Toast misoro inoshandisa display: flex, ichibvumira kurongedza zviri nyore zvemukati 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>

Translucent

Toasts anopenya zvishoma, zvakare, saka anosanganisa pamusoro pechero chavanogona kuoneka pamusoro. Kune mabhurawuza anotsigira backdrop-filterCSS midziyo, isu tichaedzawo kudzima zvinhu pasi petoast.

<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 panguva, isa zvitaera zvekumisikidza ipapo pa .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="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>

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. Uyezve, sanganisiraaria-atomic="true" kuve nechokwadi chekuti toast yese inogara ichiziviswa sechinhu chimwe chete (atomic) yuniti, pane kuzivisa zvakachinjwa (izvo zvinogona kuunza matambudziko kana iwe ukangogadzirisa chikamu chemukati chetoast, kana kuratidza zvakafanana zvirimo pa. imwe nguva gare gare). 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 shuwa kugadzirisa delaynguva yekubuda kuti uone kuti vanhu vane 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>

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