in English

Toasts

Pouse notifikasyon bay vizitè ou yo ak yon pen griye, yon mesaj alèt ki lejè ak fasil personnalisable.

Toasts se notifikasyon ki lejè ki fèt pou imite notifikasyon pouse ke sistèm operasyon mobil ak Desktop yo te popilè. Yo bati ak flexbox, kidonk yo fasil pou aliman ak pozisyon.

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin pen griye:

  • Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .
  • Toasts yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
  • Tanpri sonje ke ou responsab pou pwezante pen griye.
  • Toasts ap kache otomatikman si ou pa presize autohide: false.
Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Egzanp yo

Debaz

Pou ankouraje pen griye extensible ak previzib, nou rekòmande yon header ak kò. Tèt pen griye itilize display: flex, sa ki pèmèt aliyman fasil nan kontni gras a maj nou yo ak sèvis piblik flexbox.

Toasts yo fleksib jan ou bezwen epi yo gen yon ti kras maketing obligatwa. Omwen, nou mande pou yon sèl eleman ki genyen kontni "griye" ou epi ankouraje fòtman yon bouton anile.

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

Viv

Klike sou bouton ki anba a pou montre yon pen griye (ki pozisyone ak sèvis piblik nou yo nan kwen anba dwat) ki te kache pa default ak .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>

Translusid

Toasts yo yon ti kras translusid melanje nan ak sa ki anba yo.

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

Anpile

Lè ou gen plizyè toasts, nou pa default anpile yo vètikal nan yon fason lizib.

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

Plasman

Mete pen griye ak CSS koutim jan ou bezwen yo. Anwo dwat la souvan itilize pou notifikasyon, menm jan ak mitan an tèt. Si w ap montre sèlman yon pen griye nan yon moman, mete estil pozisyon yo dwat sou .toast.

Bootstrap 11 minit de sa
Bonjou, mond! Sa a se yon mesaj pen griye. 
<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>

Pou sistèm ki jenere plis notifikasyon, konsidere itilize yon eleman anbalaj pou yo ka fasilman pile.

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

Ou ka jwenn anpenpan tou ak sèvis piblik flexbox pou fè aliman pen griye orizontal ak / oswa vètikal.

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

Aksesiblite

Toasts yo gen entansyon fè ti entèripsyon pou vizitè ou oswa itilizatè yo, kidonk pou ede moun ki gen lektè ekran ak teknoloji asistans ki sanble, ou ta dwe vlope pen griye ou nan yon aria-liverejyon . Chanjman nan rejyon viv (tankou enjekte / ajou yon eleman pen griye) otomatikman anonse pa lektè ekran san yo pa bezwen deplase konsantre itilizatè a oswa otreman entèwonp itilizatè a. Anplis de sa, enkli aria-atomic="true"asire ke tout pen griye a toujou anonse kòm yon sèl inite (atomik), olye ke jis anonse sa ki te chanje (ki ta ka mennen nan pwoblèm si ou sèlman mete ajou yon pati nan kontni pen griye a, oswa si montre menm kontni pen griye a. nan yon moman pita nan tan). Si enfòmasyon ki nesesè yo enpòtan pou pwosesis la, pa egzanp pou yon lis erè nan yon fòm, Lè sa a, sèvi ak eleman alèt la .olye pou yo pen griye.

Remake byen ke rejyon an ap viv la bezwen prezan nan maketing la anvan pen griye a te pwodwi oswa mete ajou. Si ou dinamik jenere tou de an menm tan epi enjekte yo nan paj la, jeneralman yo pa pral anonse pa teknoloji asistans.

Ou bezwen tou adapte a roleak aria-livenivo depann sou kontni an. Si se yon mesaj enpòtan tankou yon erè, sèvi ak role="alert" aria-live="assertive", otreman sèvi ak role="status" aria-live="polite"atribi.

Kòm kontni w ap montre a chanje, asire w ke ou mete ajou tan an delaypou itilizatè yo gen ase tan pou li pen griye a.

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

Lè w ap itilize autohide: false, ou dwe ajoute yon bouton fèmen pou pèmèt itilizatè yo ranvwaye pen griye a.

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

Pandan ke teknikman li posib pou ajoute kontwòl konsantre/aksyone (tankou bouton adisyonèl oswa lyen) nan pen griye ou a, ou ta dwe evite fè sa pou otokache pen griye. Menm si ou bay pen griye a yon tan long delay, itilizatè klavye ak teknoloji asistans yo ka jwenn li difisil pou rive nan pen griye a alè pou yo pran aksyon (piske pen griye pa resevwa konsantre lè yo parèt). Si w absoliman dwe gen plis kontwòl, nou rekòmande pou w sèvi ak yon pen griye ak autohide: false.

Konpòtman JavaScript

Itilizasyon

Inisyalize toasts via JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Non Kalite Default Deskripsyon
animasyon booleyen vre Aplike yon tranzisyon CSS fennen sou pen griye a
oto kache booleyen vre Oto kache pen griye a
reta nimewo 500 Reta kache pen griye a (ms)

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

$().toast(options)

Tache yon moun k ap okipe pen griye nan yon koleksyon eleman.

.toast('show')

Revele pen griye yon eleman. Retounen bay moun k ap rele a anvan yo te montre pen griye a (sa vle di anvan shown.bs.toastevènman an rive). Ou gen manyèlman rele metòd sa a, olye pen griye ou a pa pral montre.

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

.toast('hide')

Kache pen griye yon eleman. Retounen bay moun kap rele a anvan pen griye a te kache (sa vle di anvan hidden.bs.toastevènman an rive). Ou dwe manyèlman rele metòd sa a si ou te fè autohidenan false.

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

.toast('dispose')

Kache pen griye yon eleman. Pen grye ou a ap rete sou DOM la men li p ap parèt ankò.

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

Evènman

Kalite Evènman Deskripsyon
montre.bs.griye Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre.bs.griye Evènman sa a revoke lè pen griye a te vin vizib pou itilizatè a.
kache.bs.griye Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
kache.bs.griye Evènman sa a revoke lè pen griye a fini kache pou itilizatè a. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})