Ebiwoomerera

Push notifications to your visitors with a toast, obubaka obw’okulabula obutazitowa era obwangu okulongoosa.

Ku muko guno

Toasts bye bimanyisibwa ebizitowa ebikoleddwa okukoppa okumanyisibwa okusindika okubadde kwettanirwa enkola z’oku ssimu ne ku mmeeza. Zizimbibwa ne flexbox, kale nnyangu okuzikwataganya n’okuziteeka mu kifo.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa toast plugin:

Toasts zibeera opt-in olw’ensonga z’okukola, kale olina okuzitandika ggwe kennyini .
Toasts zijja kwekweka zokka singa tolambika autohide: false.

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Eby’okulabirako

Kya bulijjo

Okukubiriza tositi ezigaziwa era eziteeberezebwa, tusaba omutwe n’omubiri. Toast headers use display: flex, okusobozesa okwanguyirwa okulaganya ebirimu okwebaza margin ne flexbox utilities zaffe.

Toasts zikyukakyuka nga bwe weetaaga era zirina markup ntono nnyo eyeetaagisa. Ekitono ennyo, twetaaga ekintu kimu okubeeramu ebirimu byo “ebyokeddwa” era tukubiriza nnyo bbaatuuni y’okugoba.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Emabegako, scripts zaffe dynamically yagattako .hideekibiina okukweka ddala toast (ne display:none, okusinga just with opacity:0). Kino kati tekikyakwetaagisa. Naye, olw'okukwatagana okudda emabega, script yaffe ejja kusigala ng'ekyusakyusa ekibiina (wadde nga tewali bwetaavu bwa nkola ku kyo) okutuusa ku nkyusa enkulu eddako.

Ekyokulabirako ekiramu

Nywa ku bbaatuuni wansi okulaga tositi (eteekeddwa n’ebikozesebwa byaffe mu nsonda eya wansi ku ddyo) ebadde ekwekeddwa nga bwe kibadde.

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>

Tukozesa JavaScript eno wammanga okutandikawo live toast demo yaffe:

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

    toast.show()
  })
}

Ekitangaala ekitangalijja

Tositi zitangalijja katono okutabula n’ebiri wansi wazo.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Okutunga

Osobola okuteeka tositi ng’ozizinga mu kibya kya tositi, ekijja okwongerako ebanga mu vertikal.

Okulaba? Nga bwekiri bwekityo.

Emitwe waggulu, toasts zijja kutuuma automatically

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

Ebirimu eby’enjawulo

Customize toasts zo nga oggyawo sub-components, tweaking them with utilities , oba nga ossaako markup yo. Wano tukoze toast ennyangu nga tuggyawo default .toast-header, nga twongerako custom hide icon okuva mu Bootstrap Icons , era nga tukozesa ebimu ku flexbox utilities okutereeza layout.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Ekirala osobola n’okwongerako ebifuga n’ebitundu ebirala ku tositi.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Ensengeka za langi

Nga ozimba ku kyokulabirako ekyo waggulu, osobola okukola langi za tositi ez’enjawulo n’ebikozesebwa byaffe ebya langi n’emabega . Wano twongedde ne ku , ate oluvannyuma ne twongera ku button yaffe ey'okuggalawo. Ku lw'empenda ennyangu, tuggyawo ensalosalo esookerwako ne ..bg-primary.text-white.toast.btn-close-white.border-0

Mwasuze mutya ensi! Buno bubaka bwa 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>

Okuteekebwa mu kifo

Teeka toasts ne custom CSS nga bw'ozeetaaga. Waggulu ku ddyo atera okukozesebwa okumanyisa, nga bwe kiri waggulu wakati. Bw’oba ogenda okulaga tositi emu yokka omulundi gumu, teeka emisono gy’okuteeka mu kifo ekituufu ku .toast.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Ku nkola ezikola okumanyisibwa okusingawo, lowooza ku kukozesa ekintu ekizinga zisobole okwanguyirwa okutunga.

Okulaba? Nga bwekiri bwekityo.

Emitwe waggulu, toasts zijja kutuuma automatically

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

Osobola n’okufuna fancy ne flexbox utilities okulaganya toasts horizontally ne/oba vertically.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Okutuuka ku bantu

Tositi zigendereddwamu okuba obutaataaganya obutonotono eri abagenyi bo oba abakozesa, kale okuyamba abo abalina ebisoma ku ssirini ne tekinologiya ow’enjawulo ayamba, olina okuzinga tositi zo mu aria-livekitundu . Enkyukakyuka mu bitundu ebiramu (nga okukuba empiso/okuzza obuggya ekitundu kya tositi) zilangirirwa mu ngeri ey’otoma abasoma ku ssirini nga tekyetaagisa kutambuza kifo ky’omukozesa oba okusalako omukozesa mu ngeri endala. Okugatta ku ekyo, ssaamu aria-atomic="true"okukakasa nti tositi yonna bulijjo elangirirwa nga yuniti emu (atomu), okusinga okulangirira kyokka ekyakyusibwa (ekiyinza okuvaako obuzibu singa otereeza ekitundu kyokka ku birimu tositi, oba singa olaga ebirimu mu tositi bye bimu mu kiseera ekiddako). Singa amawulire ageetaagisa gaba makulu eri enkola, okugeza ku lukalala lw’ensobi mu ffoomu, olwo kozesa ekitundu eky’okulabulamu kifo kya tositi.

Weetegereze nti ekitundu ekiramu kyetaaga okubaawo mu markup nga toast tennakolebwa oba okulongoosebwa. Singa okola dynamically byombi mu kiseera kye kimu n’obiyingiza mu lupapula, okutwalira awamu tebijja kulangirirwa tekinologiya ayamba.

Era olina okukyusakyusa rolene aria-livelevel okusinziira ku birimu. Bwe kiba nga bubaka bukulu nga ensobi, kozesa role="alert" aria-live="assertive", bwe kitaba ekyo kozesa role="status" aria-live="polite"attributes.

Nga ebirimu by’olaga bikyuka, kakasa nti ozza obuggya delayekiseera ekiweddemu abakozesa basobole okufuna obudde obumala okusoma tositi.

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

Bw’oba okozesa autohide: false, olina okugattako akabonero akaggalawo okusobozesa abakozesa okugoba tositi.

Mwasuze mutya ensi! Buno bubaka bwa 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>

Wadde nga mu by’ekikugu kisoboka okwongerako ebifuga ebiyinza okussa essira/ebikolebwa (nga obutambi oba enkolagana endala) mu tositi yo, olina okwewala okukola kino ku tositi ezikweka. Ne bw’owa tositi ekiseera ekiwanvu delay, abakozesa kiiboodi ne tekinologiya ayamba bayinza okusanga obuzibu okutuuka ku tositi mu budde okukola (okuva tositi bwe zitafuna focus nga ziragiddwa). Bw’oba ddala olina okuba n’ebifuga ebirala, tusaba okukozesa tositi ng’erina autohide: false.

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Enkozesa

Tandika tositi ng'oyita mu JavaScript:

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

Ebivaako amaanyi

Okugobwa kuyinza okutuukirira n’ekintu ekiri dataku bbaatuuni munda mu tositi nga bwe kiragibwa wansi:

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

oba ku bbaatuuni ebweru wa tositi ng’okozesa data-bs-targetnga bwe kiragibwa wansi:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="".

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
`animation`	boolean	`true`	Siiga enkyukakyuka ya CSS fade ku toast
`autohide`	boolean	`true`	Auto okukweka toast
`delay`	omuwendo	`5000`	Okulwawo okukweka tositi (ms) .

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

okulaga

Abikkula tositi ya elementi. Edda eri oyo akubira nga tositi tennalagibwa ddala (kwe kugamba nga shown.bs.toastekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo, mu kifo ky’ekyo tositi yo tejja kulaga.

toast.show()

okweekweeka

Akweka tositi ya elementi. Edda eri oyo akubira nga tositi tennakwekebwa ddala (kwe kugamba hidden.bs.toastng’ekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo singa wakola autohideku false.

toast.hide()

okusuula

Akweka tositi ya elementi. Toast yo ejja kusigala ku DOM naye tegenda kuddamu kulaga.

toast.dispose()

getEkyokulabirako

Enkola ya static ekusobozesa okufuna toast instance ekwatagana ne DOM element

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

getObaTondawoEkifaananyi

Enkola ya static ekusobozesa okufuna toast instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo

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

Ebibaddewo

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`show.bs.toast`	Ekintu kino kikuba amangu ddala nga `show`enkola ya instance eyitiddwa.
`shown.bs.toast`	Omukolo guno gukubwa nga tositi emaze okulabika eri oyo agikozesa.
`hide.bs.toast`	Ekintu kino kikubwa amangu ddala nga `hide`enkola ya instance eyitiddwa.
`hidden.bs.toast`	Omukolo guno gukubwa nga tositi emaze okukwekebwa eri oyo agikozesa.

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