Ba toasts ya kosala

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.

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

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.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

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

<div class="toast-container position-static">
  <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 kolongolaka 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.

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

<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 .text-bg-primaryna .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.

<div class="toast align-items-center text-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.

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

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

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

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

CSS

Ba variables oyo ezali

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba toasts esalelaka sikoyo ba variables CSS locales na .toastpona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
  

Ba variables ya Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Ba méthodes ya kosala

Makambo oyo esalemaki

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