Tostoj

Puŝu sciigojn al viaj vizitantoj per tosto, 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 specifigas 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.

html

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

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

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

html

<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

html

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

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.

html

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

html

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

html

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

Lokigo

Metu tostojn kun kutimaj CSS kiel vi bezonas ilin. 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.

html

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

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

html

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

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

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

html

<!-- 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 celas esti malgrandaj interrompoj por viaj vizitantoj aŭ uzantoj, do por helpi tiujn kun ekranlegiloj kaj similaj helpaj teknologioj, vi devas envolvi viajn tostojn en aria-liveregionon . Ŝ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, inkluzivu 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 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.

html

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

CSS

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, tostoj nun uzas lokajn CSS .toast-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

  --#{$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};

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

Uzado

Komencu tostojn per JavaScript:

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

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj superregas valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Nomo	Tajpu	Defaŭlte	Priskribo
`animation`	bulea	`true`	Apliki CSS-fade-transiron al la rostpano.
`autohide`	bulea	`true`	Aŭtomate kaŝu la rostpanon post la prokrasto.
`delay`	nombro	`5000`	Prokrasto en milisekundoj antaŭ kaŝi la rostpanon.

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 .

Metodo	Priskribo
`dispose`	Kaŝas rostpanon de elemento. Via rostpano restos sur la DOM sed ne montros plu.
`getInstance`	Senmova metodo, kiu ebligas al vi akiri la rostpanon asociitan kun DOM-elemento. Ekzemple: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Resendas Bootstrap toast-okazaĵon.
`getOrCreateInstance`	Senmova metodo, kiu ebligas al vi akiri la rostpantan ekzemplon asociitan kun DOM-elemento, aŭ krei novan, se ĝi ne estis pravigita. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Resendas Bootstrap toast-okazaĵon.
`hide`	Kaŝas rostpanon de elemento. Revenas al la alvokanto antaŭ ol la rostpano estas fakte kaŝita (te antaŭ ol la `hidden.bs.toast`evento okazas). Vi devas permane voki ĉi tiun metodon se vi faris `autohide`al `false`.
`isShown`	Resendas buleon laŭ la videbleco de toast.
`show`	Rivelas elementon rostpanon. Revenas al la alvokanto antaŭ ol la rostpano estas efektive montrita (te antaŭ ol la `shown.bs.toast`evento okazas). Vi devas permane voki ĉi tiun metodon, anstataŭe via rostpano ne aperos.

Eventoj

Evento	Priskribo
`hide.bs.toast`	Ĉi tiu evento estas lanĉita tuj kiam la `hide`ekzempla metodo estas vokita.
`hidden.bs.toast`	Ĉi tiu evento estas lanĉita kiam la rostpano finiĝis kaŝita de la uzanto.
`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.

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