Source

Toasts

Alefaso ny fampandrenesana ho an'ny mpitsidika anao miaraka amin'ny toast, hafatra fanairana maivana ary mora azo amboarina.

Ny toast dia fampandrenesana maivana natao haka tahaka ny fampandrenesana fanosehana izay nalaza tamin'ny rafitra fiasana finday sy desktop. Namboarina tamin'ny flexbox izy ireo, noho izany dia mora ny mandrindra sy mametraka azy ireo.

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin toast:

  • Raha manorina JavaScript avy amin'ny loharano ianao dia mitakyutil.js .
  • Ny toast dia nisafidy noho ny antony fampisehoana, ka tsy maintsy ataonao voalohany izy ireo .
  • Mariho fa ianao no tompon'andraikitra amin'ny fametrahana toast.
  • Hafenina ho azy ny toasts raha tsy voatondro autohide: false.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'io singa io. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

OHATRA

Basic

Mba hamporisihana toast azo itarina sy azo vinavinaina, dia manoro hevitra ny lohapejy sy vatana. Ny lohatenin'ny toast dia ampiasaina display: flex, mamela ny fampifanarahana mora amin'ny atiny noho ny fampiasanay margin sy flexbox.

Ny toast dia malefaka araka izay ilainao ary manana marika kely ilaina. Farafaharatsiny, mitaky singa tokana izahay mba hitehirizana ny atiny “toast” ary mamporisika mafy ny bokotra manilika.

<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

Somary mangatsiatsiaka ihany koa ny toast, ka mitambatra amin'izay mety hisehoany. Ho an'ny mpitety tranonkala manohana ny backdrop-filterfananana CSS, dia hiezaka ihany koa izahay hanakorontana ireo singa ao ambanin'ny toast.

<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

Rehefa manana toast maromaro ianao, dia ataontsika ny mametraka azy ireo mitsangana amin'ny fomba mora vakiana.

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

fametrahana

Mametraha toast miaraka amin'ny CSS mahazatra araka izay ilainao. Ny ambony havanana dia matetika ampiasaina amin'ny fampahafantarana, toy ny eo afovoany ambony. Raha toa ianao ka hampiseho toast iray isaky ny mandeha dia apetraho eo amin'ny .toast.

Bootstrap 11 min lasa izay
Hello World! Hafatra toast ity. 
<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>

Ho an'ny rafitra miteraka fampandrenesana bebe kokoa dia diniho ny fampiasana singa famonosana mba hahafahan'izy ireo mitambatra mora foana.

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

Azonao atao ihany koa ny mirefy amin'ny fitaovana flexbox mba hampifanaraka ny toast amin'ny horizontaly sy/na mitsangana.

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

Ny toast dia natao ho fanelingelenana kely ho an'ny mpitsidika na mpampiasa anao, ka mba hanampiana ireo manana mpamaky efijery sy teknolojia fanampiana mitovy amin'izany, dia tokony hafeninao amin'ny aria-livefaritra iray ny toasts . Ny fiovana amin'ny faritra velona (toy ny fanindronana/fanavaozana ny singa toast) dia ambaran'ny mpamaky efijery ho azy fa tsy mila manetsika ny fifantohan'ny mpampiasa na manapaka ny mpampiasa. Fanampin'izay, ampidiro aria-atomic="true"mba hahazoana antoka fa ny toast manontolo dia nambara ho singa tokana (atomika) foana, fa tsy manambara izay novana (izay mety hiteraka olana raha manavao ny ampahany amin'ny atiny fotsiny ianao, na raha mampiseho ny votoatin'ny toast mitovy amin'ny amin'ny fotoana manaraka). Raha zava-dehibe amin'ny dingana ny fampahalalana ilaina, ohatra amin'ny lisitry ny lesoka amin'ny endrika iray, dia ampiasao ny singa fanairanaho solon'ny mofo mofo.

Mariho fa ny faritra velona dia tsy maintsy misy ao amin'ny marika alohan'ny hamokarana na havaozina ny toast. Raha mamorona azy roa miaraka ianao ary manindrona azy ireo ao amin'ny pejy, dia tsy hambara amin'ny teknolojia fanampiana izy ireo.

Ilainao koa ny mampifanaraka ny rolesy ny aria-livehaavony arakaraka ny atiny. Raha hafatra manan-danja toy ny hadisoana izany dia ampiasao role="alert" aria-live="assertive", raha tsy izany dia ampiasao role="status" aria-live="polite"ny toetra.

Rehefa miova ny atiny asehonao dia ataovy izay hanavao ny delayfe -potoana mba hahazoana antoka fa manana fotoana ampy hamakiana ny toast ny olona.

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

Rehefa mampiasa autohide: false, dia tsy maintsy manampy bokotra akaiky ianao mba hamela ny mpampiasa hanilika ny 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>

Fihetsika JavaScript

Fampiasana

Atombohy ny toast amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana Type toerana misy anao Description
fanentanana boolean marina Ampiharo CSS fade transition amin'ny toast
autohide boolean marina Afeno ho azy ny toast
fahatarana isa 500 Fanemorana ny fanafenana ny toast (ms)

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

$().toast(options)

Ampifandraisina amin'ny fanangonana singa iray ny mpikarakara toast.

.toast('show')

Mampiseho toast an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nampisehoana ny toast (izany hoe alohan'ny shown.bs.toastnitrangan'ny hetsika). Tsy maintsy miantso an'io fomba io ianao, fa tsy hiseho ny mofonao.

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

.toast('hide')

Manafina ny toast an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny toast (izany hoe alohan'ny hidden.bs.toastnitrangan'ny hetsika). Tsy maintsy miantso an'io fomba io ianao raha autohidenanao false.

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

.toast('dispose')

Manafina ny toast an'ny singa iray. Hijanona ao amin'ny DOM ny mofonao fa tsy hiseho intsony.

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

zava-mitranga

Karazana hetsika Description
show.bs.toast Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
aseho.bs.toast Ity hetsika ity dia alefa rehefa naseho ho hitan'ny mpampiasa ny toast.
hide.bs.toast Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.toast Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny toast. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})