Tostoj

Puŝu sciigojn al viaj vizitantoj per rostpano, malpeza kaj facile agordebla atentiga mesaĝo.

Sur ĉi tiu paĝo

Tostoj estas malpezaj sciigoj dizajnitaj por imiti la puŝajn sciigojn popularigitaj de poŝtelefonaj kaj labortablaj operaciumoj. Ili estas konstruitaj per flexbox, do ili estas facile viceblaj kaj pozicieblaj.

Superrigardo

Aferoj sciindaj kiam vi uzas la rostpanon-kromaĵon:

Tostoj estas aligeblaj pro rendimentokialoj, do vi devas pravigi ilin mem .
Tostoj aŭtomate kaŝos se vi ne specifos autohide: false.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Ekzemploj

Baza

Por kuraĝigi etendeblajn kaj antaŭvideblajn tostojn, ni rekomendas kaplinion kaj korpon. Tostaj kaplinioj uzas display: flex, permesante facilan vicigon de enhavo danke al niaj marĝenaj kaj flekskesto-servaĵoj.

Tostoj estas tiel flekseblaj kiel vi bezonas kaj havas tre malmulte da bezonata markado. Minimume, ni postulas ununuran elementon por enhavi vian "tostitan" enhavon kaj forte kuraĝigas forĵeti butonon.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Antaŭe, niaj skriptoj dinamike aldonis la .hideklason por tute kaŝi rostpanon (kun display:none, prefere ol nur kun opacity:0). Ĉi tio nun ne plu necesas. Tamen, por retrokongruo, nia skripto daŭre ŝanĝu la klason (kvankam ne ekzistas praktika bezono por ĝi) ĝis la venonta grava versio.

Viva ekzemplo

Alklaku la suban butonon por montri rostpanon (poziciigitan kun niaj iloj en la malsupra dekstra angulo) kiu estis kaŝita defaŭlte.

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>

Ni uzas la jenan JavaScript por ekigi nian vivan rostpandemonstraĵon:

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

    toast.show()
  })
}

Travidebla

Tostoj estas iomete travideblaj por miksi kun kio estas sub ili.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Stakiĝo

Vi povas stakigi rostpanojn envolvante ilin en rostpanujon, kiu vertikale aldonos iom da interspaco.

Vidu? Ĝuste tiel.

Atentu, tostoj aŭtomate staplos

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

Propra enhavo

Agordu viajn tostojn forigante subkomponentojn, ĝustigante ilin per utilecoj aŭ aldonante vian propran markadon. Ĉi tie ni kreis pli simplan rostpanon forigante la defaŭltan .toast-header, aldonante kutiman kaŝan ikonon de Bootstrap Ikonoj , kaj uzante iujn flekskeston ilojn por ĝustigi la aranĝon.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Alternative, vi ankaŭ povas aldoni pliajn kontrolojn kaj komponantojn al tostoj.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Koloraj skemoj

Konstruante la supran ekzemplon, vi povas krei malsamajn tostajn kolorskemojn per niaj koloraj kaj fonaj utilecoj. Ĉi tie ni aldonis .bg-primarykaj .text-whiteal la .toast, kaj poste aldonis .btn-close-whiteal nia fermbutono. Por klara rando, ni forigas la defaŭltan randon per .border-0.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Lokigo

Metu tostojn per kutima CSS laŭ via bezono. La supra dekstra estas ofte uzata por sciigoj, same kiel la supra mezo. Se vi iam nur montros unu rostpanon samtempe, metu la poziciajn stilojn ĝuste sur la .toast.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Por sistemoj, kiuj generas pli da sciigoj, konsideru uzi envolvan elementon por ke ili povu facile stakiĝi.

Vidu? Ĝuste tiel.

Atentu, tostoj aŭtomate staplos

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

Vi ankaŭ povas ŝati kun flexbox-ilaĵoj por vicigi rostpanojn horizontale kaj/aŭ vertikale.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Alirebleco

Tostoj intencas esti malgrandaj interrompoj por viaj vizitantoj aŭ uzantoj, do por helpi tiujn kun ekranlegiloj kaj similaj helpaj teknologioj, vi devus envolvi viajn tostojn en aria-liveregiono . Ŝanĝoj al vivaj regionoj (kiel ekzemple injektado/ĝisdatigado de rostpanokomponento) estas aŭtomate anoncitaj de ekranlegiloj sen neceso movi la fokuson de la uzanto aŭ alie interrompi la uzanton. Aldone, inkludu aria-atomic="true"certigi, ke la tuta rostpano ĉiam estas anoncita kiel unuopa (atoma) unuo, prefere ol nur anonci tion, kio estis ŝanĝita (kio povus konduki al problemoj se vi nur ĝisdatigas parton de la enhavo de la rostpano, aŭ se vi montros la saman rostpanon. en pli posta tempo). Se la bezonataj informoj estas gravaj por la procezo, ekz. por listo de eraroj en formo, tiam uzu la atentigkomponentonanstataŭ rostpano.

Notu, ke la viva regiono devas ĉeesti en la markado antaŭ ol la rostpano estas generita aŭ ĝisdatigita. Se vi dinamike generas ambaŭ samtempe kaj injektas ilin en la paĝon, ili ĝenerale ne estos anoncitaj de helpaj teknologioj.

Vi ankaŭ devas adapti la rolekaj aria-livenivelon depende de la enhavo. Se temas pri grava mesaĝo kiel eraro, uzu role="alert" aria-live="assertive", alie uzu role="status" aria-live="polite"atributojn.

Dum la enhavo, kiun vi montras, ŝanĝas, nepre ĝisdatigu la delaytempon por ke uzantoj havu sufiĉe da tempo por legi la rostpanon.

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

Kiam vi uzas autohide: false, vi devas aldoni fermbutonon por permesi al uzantoj malakcepti la rostpanon.

Saluton mondo! Ĉi tio estas tosta mesaĝo.

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

Kvankam teknike eblas aldoni fokuseblajn/ageblajn kontrolojn (kiel aldonajn butonojn aŭ ligilojn) en via rostpano, vi devus eviti fari tion por aŭtomate kaŝantaj tostoj. Eĉ se vi donas al la rostpano longan delaytempon , uzantoj de klavaro kaj helpteknologio povas malfacile atingi la rostpanon ĝustatempe por ekagi (ĉar rostpanoj ne ricevas fokuson kiam ili estas montrataj). Se vi nepre devas havi pliajn kontrolojn, ni rekomendas uzi rostpanon kun autohide: false.

Sass

Variabloj

$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);

Uzado

Komencu tostojn per JavaScript:

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

Ellasiloj

Malakcepto povas esti atingita per la dataatributo sur butono ene de la rostpano kiel montrite sube:

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

aŭ sur butono ekster la rostpano uzante la data-bs-targetkiel montrite sube:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-animation="".

Nomo	Tajpu	Defaŭlte	Priskribo
`animation`	bulea	`true`	Apliku CSS-fade-transiron al la rostpano
`autohide`	bulea	`true`	Aŭtomate kaŝu la rostpanon
`delay`	nombro	`5000`	Prokrasto kaŝi la rostpanon (ms)

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

montri

Rivelas elementon rostpanon. Revenas al la alvokanto antaŭ ol la rostpano estas efektive montrita (te antaŭ ol la shown.bs.toastevento okazas). Vi devas permane voki ĉi tiun metodon, anstataŭe via rostpano ne aperos.

toast.show()

kaŝi

Kaŝas rostpanon de elemento. Revenas al la alvokanto antaŭ ol la rostpano efektive estis kaŝita (te antaŭ ol la hidden.bs.toastevento okazas). Vi devas permane voki ĉi tiun metodon se vi faris autohideal false.

toast.hide()

disponi

Kaŝas rostpanon de elemento. Via rostpano restos sur la DOM sed ne montros plu.

toast.dispose()

getInstance

Senmova metodo, kiu ebligas al vi akiri la rostpanon asociitan kun DOM-elemento

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

getOrCreateInstance

Senmova metodo kiu ebligas al vi akiri la rostpanon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita

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

Eventoj

Eventa tipo	Priskribo
`show.bs.toast`	Ĉi tiu evento tuj ekfunkciigas kiam la `show`ekzempla metodo estas vokita.
`shown.bs.toast`	Ĉi tiu evento estas lanĉita kiam la rostpano fariĝis videbla al la uzanto.
`hide.bs.toast`	Ĉi tiu evento estas lanĉita tuj kiam la `hide`ekzempla metodo estas vokita.
`hidden.bs.toast`	Ĉi tiu evento estas pafita kiam la rostpano finiĝis kaŝita de la uzanto.

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