Ba toasts ya kosala

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

Na lokasa oyo

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:

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.

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.

Mbote, mokili! Oyo ezali message ya toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Liboso, ba scripts na biso ebakisaki na ndenge ya dynamique .hideclasse mpo na kobomba mobimba toast (na display:none, na esika ya kaka na opacity:0). Yango ezali sikawa na ntina lisusu te. Kasi, mpo na boyokani ya nsima, script na biso ekolanda kobongola kelasi (atako ezali na mposa ya kosalela yango te) tii na version monene oyo ekolanda.

Ndakisa ya bomoi

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.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Tosalelaka JavaScript oyo elandi mpo na kosala démonstration na biso ya toast en direct:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Ezali na translucide

Ba toasts ezalaka mua translucide pona ko blend na oyo eza na se na yango.

Mbote, mokili! Oyo ezali message ya toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Kosala ebele ya biloko

Okoki kotya ba toast na kozinga yango na kati ya eloko oyo batyaka toast, oyo ekobakisa mwa esika oyo ezali na ngámbo ya semba.

Kotala? Kaka boye.

Mitu likolo, ba toasts eko empiler automatiquement

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenu personnalisé

Personnaliser ba toasts na yo na kolongolaka ba sous-composants, ko tweaking yango na ba utilitaires , to na kobakisa marquage na yo moko. Awa tosali toast moko ya pete na kolongola default .toast-header, kobakisa elembo ya kobomba oyo esalemi na kolanda bamposa na Bootstrap Icons , mpe kosalela mwa ba utilitaires ya flexbox mpo na kobongisa layout.

Mbote, mokili! Oyo ezali message ya toast.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Na lolenge mosusu, okoki mpe kobakisa ba contrôles mpe ba composants mosusu na ba toasts.

Mbote, mokili! Oyo ezali message ya toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Ba schemes ya ba couleurs

Na kotonga na ndakisa oyo tolobeli awa na likoló, okoki kosala ba schemes ya couleur ya toast ekeseni na ba utilitaires na biso ya couleur mpe ya fond . Awa tobakisi .bg-primarympe .text-whitena .toast, mpe na nsima tobakisi .btn-close-whitena bouton na biso ya kokanga. Mpo na bord ya crisp, tolongolaka ndelo ya default na .border-0.

Mbote, mokili! Oyo ezali message ya toast.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

Mbote, mokili! Oyo ezali message ya toast.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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.

Kotala? Kaka boye.

Mitu likolo, ba toasts eko empiler automatiquement

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Mbote, mokili! Oyo ezali message ya toast.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 kaka 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 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-bs-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.

Mbote, mokili! Oyo ezali message ya toast.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Sass oyo azali

Ba variables oyo ezali

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Kosalela yango

Initialiser ba toasts na nzela ya JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Ba déclencheur

Kolongolama ekoki kosalema na dataattribut oyo ezali na bouton moko na kati ya toast ndenge emonisami awa na nse:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

to na bouton moko oyo ezali na libándá ya toast na lisalisi ya data-bs-targetndenge emonisami awa na nse:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

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-bs-, lokola na data-bs-animation="".

Nkombo	Lolenge	Mbeba	Ndimbola
`animation`	boolean	`true`	Salelá transition ya fade ya CSS na toast
`autohide`	boolean	`true`	Auto kobomba toast ya kosala
`delay`	nimero	`5000`	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 .

kolakisa

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.

toast.show()

kobombana

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.

toast.hide()

kobwaka yango

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

toast.dispose()

kozwaInstance

Méthode statique oyo e permettre yo ozua instance ya toast associé na élément DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

kozwaToKosalaInstance

Méthode statique oyo e permettre yo ozua instance ya toast associé na élément DOM, to o créer ya sika au cas où ezalaki initialisé te

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Makambo oyo esalemaki

Lolenge ya likambo	Ndimbola
`show.bs.toast`	Evenement oyo ezo beta mbala moko tango `show`méthode ya instance ebengami.
`shown.bs.toast`	Evenement oyo ezo beta tango toast esili kosala que ezala visible na usager.
`hide.bs.toast`	Evenement oyo ezo beta mbala moko tango `hide`méthode ya instance ebengami.
`hidden.bs.toast`	Evenement oyo ezo beta tango toast esili kobombama na usager.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})