Source

Ba toasts ya kosala

Pusa ba notifications na ba visiteurs na yo na toast, message ya alerte ya léger et facilement personnalisable.

Toasts ezali ba notifications ya pete oyo ebongisami mpo na ko imiter ba notifications ya push oyo esili ko populariser na ba systèmes d’exploitation mobile mpe ya bureau. Batongami na flexbox, yango wana ezali pete mpo na ko aligner mpe ko positionner.

Botali ya mozindo

Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya toast:

  • Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .
  • Ba toasts ezali opt-in mpo na ba raisons ya performance, yango wana esengeli o initialiser yango yo moko .
  • Ba toasts ekobombama automatiquement soki olakisaki te autohide: false.

Bandakisa

Ya ntina

Mpo na kolendisa ba toasts oyo ekoki kopanzana mpe oyo ekoki kokanisama liboso, tozali kolendisa yo otya motó mpe nzoto. Toast headers use display: flex, permettant facilement alignment ya contenus grâce na ba utilitaires na biso ya marge na flexbox.

Toasts ezali flexible ndenge osengeli na yango mpe ezali na marquage oyo esengeli mpenza moke. Na moke, tosɛngaka eloko moko mpo na kozala na makambo na yo oyo “toast” mpe kolendisa mpenza bouton ya koboya.

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

Ezali na translucide

Toasts ezali mwa translucent, mpe, yango wana esangani likolo ya eloko nyonso oyo ekoki komonana likolo. Mpo na ba navigateurs oyo esimbaka backdrop-filterpropriété CSS, tokomeka mpe kosala flou ya ba éléments na se ya 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>

Kosala ebele ya biloko

Tango ozali na ba toasts ebele, to défaut na vertiaclly empiler yango na ndenge ya kotanga.

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

Botiami na esika

Botia ba toasts na CSS personnalisé ndenge bozali na besoin na yango. Mbala mingi, basalelaka likoló na lobɔkɔ ya mobali mpo na koyebisa makambo, ndenge moko mpe na katikati ya likoló. Soki okomonisa kaka mokolo mosusu toast moko na mbala moko, tyá mitindo ya kotya yango na esika oyo ebongi mpenza na .toast.

Mokanda ya kofungola 11 mins eleki
Mbote, mokili! Oyo ezali message ya 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>

Mpo na ba systèmes oyo ebimisaka ba notifications mingi, kanisá kosalela élément ya enveloppe mpo ete bakoka kosala stack na pete.

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

Okoki mpe kozwa fancy na ba utilitaires flexbox mpo na ko aligner ba toasts horizontalement mpe/to verticalement.

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

Kozala na makoki ya kozwa yango

Ba toasts ezali na mokano ya kozala ba interruptions ya mike mike mpo na ba visiteurs to ba usagers na yo, yango wana mpo na kosalisa ba oyo bazali na ba lecteurs d’écran mpe ba technologies ya kosunga ya ndenge wana, esengeli o envelopper ba toasts na yo na aria-liverégion moko . Mbongwana na ba régions en direct (lokola ko injecter/ko mettre à jour composant ya toast) esakolamaka automatiquement na ba lecteurs d’écran sans que ezala na besoin ya ko déplacer focus ya usager to ko interrompre na ndenge mosusu. En plus, kotia aria-atomic="true"mpo na kosala ete toast mobimba esakolama ntango nyonso lokola unité moko (atomique), na esika ya kosakola oyo ebongwanaki (oyo ekoki komema mikakatano soki ozali kaka kosala mikolo oyo ndambo ya makambo oyo ezali na toast, to soki ozali kolakisa makambo ya toast ndenge moko na ntango moko ya nsima). Soki sango oyo esengeli ezali na ntina mpo na mosala, ndakisa mpo na liste ya mabunga na formulaire moko, na nsima salelá eteni ya likebisina esika ya kosala toast.

Yeba ete région en direct esengeli ezala présente na marquage avant toast ezala généré to mise à jour. Soki o générer dynamiquement nionso mibale en même temps mpe o injecter yango na page, bakozala généralement annoncer te na ba technologies d’assistance.

Esengeli pe o adapter niveau ya rolepe aria-liveselon contenus. Soki ezali message ya ntina lokola erreur, salela role="alert" aria-live="assertive", soki te salela role="status" aria-live="polite"ba attributs.

Lokola makambo oyo ozali kolakisa ezali kobongwana, kobosana te kosala mikolo oyo delayntango oyo esili mpo na kosala ete bato bázala na ntango oyo ekoki mpo na kotánga 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>

Ntango ozali kosalela autohide: false, osengeli kobakisa bouton ya kokanga mpo na kopesa nzela na basaleli bábwaka 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>

Etamboli ya JavaScript

Kosalela yango

Initialiser ba toasts na nzela ya JavaScript:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Nkombo Lolenge Mbeba Ndimbola
animation ya kosala boolean ya solo Salelá transition ya fade ya CSS na toast
autohide boolean ya solo Auto kobomba toast ya kosala
kozelisa nimero 500 Retard ya kobomba toast (ms) .

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

$().toast(options)

Ezali kokangisa eloko oyo esimbaka toast na liboke ya biloko.

.toast('show')

Ezali kobimisa toast ya élément moko. Ezongi na moto oyo abengi liboso ete toast elakisama mpenza (elingi koloba liboso ete shown.bs.toastlikambo yango esalema). Il faut obenga manuellement méthode oyo, au lieu toast na yo eko lakisa te.

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

.toast('hide')

Ebombaka toast ya élément moko. Ezongi na moto oyo abengi liboso ete toast ebombama mpenza (elingi koloba liboso ete hidden.bs.toastlikambo yango esalema). Il faut kobenga manuellement méthode oyo soki osali autohidena false.

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

.toast('dispose')

Ebombaka toast ya élément moko. Toast na yo eko tikala na DOM mais eko lakisa lisusu te.

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

Makambo oyo esalemaki

Lolenge ya likambo Ndimbola
elakisaka.bs.toast Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
elakisami.bs.toast Evenement oyo ezo beta tango toast esili kosala que ezala visible na usager.
bomba.bs.toast Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
ebombami.bs.toast Evenement oyo ezo beta tango toast esili kobombama na usager. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})