in English

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 .
  • Tosɛngi bino bóyeba ete bozali na mokumba ya kotya ba toast na esika na yango.
  • Ba toasts ekobombama automatiquement soki olakisaki te autohide: false.
Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

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>

Kofanda

Finá na butɔ oyo ezali awa na nse mpo na kolakisa toast (oyo etyami na ba utilitaires na biso na coin ya nse na lobɔkɔ ya mobali) oyo ebombami na ndenge ya libela na .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>

Ezali na translucide

Ba toasts ezalaka mua translucide pona ko mélanger na oyo eza na se na yango.

<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 to empiler yango verticalement na ndenge oyo ekoki kotangama.

<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 kaka 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 ko empiler 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="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 besoin ya ko déplacer focus ya usager to ko interrompre na ndenge mosusu. En plus, kotia aria-atomic="true"pona ko assurer que toast mobimba esakolama toujours lokola unité moko (atomique), na esika ya kosakola kaka oyo ebongwanaki (oyo ekoki komema ba problèmes soki ozali kaka ko actualiser ndambo ya contenus ya toast, to soki ozali kolakisa contenus ya toast moko na ntango mosusu). 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 ete basaleli 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>

Alors que techniquement ezali possible kobakisa ba contrôles focusable/actionable (lokola ba boutons to ba liens supplémentaires) na toast na yo, esengeli o éviter kosala yango pona ba toasts autohiding. Ata soki opesi toast a long delaytimeout , basaleli ya klaviatware mpe ya tekiniki ya kosalisa bakoki komona mpasi mpo na kokóma na toast na ntango mpo na kosala likambo (lokola ba toasts ezwaka focus te ntango balakisaka yango). Soki osengeli mpenza kozala na ba contrôles mosusu, tosengi osalela toast na autohide: false.

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)

Ekangaka mosaleli ya 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...
})