Toasts

Jiri toast, dị fechaa ma dịkwa mfe ịhazi ozi ndị ọbịa gị.

Na ibe a

Toasts bụ ọkwa dị fechaa nke emebere iji ṅomie ọkwa ntanye nke sistemu eji arụ ọrụ ekwentị na desktọpụ na-ewu ewu. Ejiri flexbox rụọ ha, yabụ na ọ dị mfe ịhazi na ọnọdụ.

Nchịkọta

Ihe ị ga-ama mgbe ị na-eji ngwa mgbakwunye toast:

A na-abanye na toasts maka ebumnuche arụmọrụ, yabụ ị ga-ebido ya n'onwe gị .
Toast ga-ezo na-akpaghị aka ma ọ bụrụ na i kọwapụtaghị autohide: false.

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Ihe atụ

Isi

Iji kwalite toasts nwere ike ịgbatị na nke enwere ike ịkọ, anyị na-akwado nkụnye eji isi mee na ahụ. Ndị isi toast na-eji display: flex, na-enye ohere ịhazi ọdịnaya dị mfe maka oke na ngwa flexbox anyị.

Toasts na-agbanwe dị ka ịchọrọ ma nwee obere akara achọrọ. Opekempe, anyị chọrọ otu mmewere iji nwee ọdịnaya “toasted” gị ma gbasie mbọ ike ka ịwepu bọtịnụ.

Ndewo Ụwa! Nke a bụ ozi 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>

Na mbụ, scripts anyị gbakwụnyere .hideklaasị iji zoo toast kpamkpam (ya na display:none, kama iji naanị ya opacity:0). Nke a adịkwaghị mkpa ugbu a. Agbanyeghị, maka ndakọrịta azụ, edemede anyị ga-aga n'ihu na-emegharị klaasị ahụ (n'agbanyeghị na ọ nweghị mkpa ọ dị maka ya) ruo na ụdị na-esote.

Ihe atụ dị ndụ

Pịa bọtịnụ dị n'okpuru iji gosi toast (nke edobere ya na akụrụngwa anyị na akuku aka nri ala) nke ezoro ezo na ndabara.

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>

Anyị na-eji Javascript na-esonụ iji kpalite ngosi toast anyị dị ndụ:

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

    toast.show()
  })
}

translucent

Toasts dị ntakịrị translucent iji jikọta ya na ihe dị n'okpuru ha.

Ndewo Ụwa! Nke a bụ ozi 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>

Nkwakọba

Ị nwere ike ikpokọta toasts site na ịtinye ha n'ime akpa toast, nke ga-agbakwunye oghere ụfọdụ.

Hụ? Dị ka nke a.

N'isi elu, toasts ga-ekpokọta na-akpaghị aka

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

Ọdịnaya ahaziri ahazi

Hazie toast gị site n'iwepụ ihe ndị dị n'okpuru, tweaking ha na akụrụngwa, ma ọ bụ site na ịgbakwunye akara nke gị. N'ebe a, anyị emepụtala toast dị mfe site na iwepu ndabara .toast-header, na-agbakwunye akara ngosi omenala na Bootstrap Icons , na iji ụfọdụ ngwa flexbox iji dozie nhazi ahụ.

Ndewo Ụwa! Nke a bụ ozi 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>

N'aka nke ọzọ, ị nwekwara ike ịgbakwunye njikwa na akụrụngwa na toasts.

Ndewo Ụwa! Nke a bụ ozi 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>

Atụmatụ agba

N'ịwulite na ihe atụ a dị n'elu, ị nwere ike ịmepụta atụmatụ agba toast dị iche iche na agba anyị na akụrụngwa ndabere anyị . Ebe a anyị atụkwasịla .bg-primaryna .text-whitena .toast, wee tinye .btn-close-whitena bọtịnụ nso anyị. Maka ihu kpụ ọkụ n'ọnụ, anyị na-ewepụ oke ndabara na .border-0.

Ndewo Ụwa! Nke a bụ ozi 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>

Ndokwa

Tinye nri nri nwere CSS omenala dịka ịchọrọ ha. A na-ejikarị aka nri elu eme ihe ngosi, dịka ọ dị n'etiti etiti. Ọ bụrụ naanị na ị na-aga igosi otu tost n'otu oge, tinye ụdị ntọhapụ nke ọma na faịlụ .toast.

Ndewo Ụwa! Nke a bụ ozi 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>

Maka sistemụ na-ewepụta ọkwa ọkwa, tụlee iji ihe mkpuchi ka ha wee nwee ike ikpokọta ngwa ngwa.

Hụ? Dị ka nke a.

N'isi elu, toasts ga-ekpokọta na-akpaghị aka

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

Ị nwekwara ike nweta ọmarịcha site na ngwa flexbox iji kwado toasts kwụ n'ahịrị na/ma ọ bụ kwụ ọtọ.

Ndewo Ụwa! Nke a bụ ozi 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>

Nnweta

Ezubere toasts ka ọ bụrụ obere nkwụsị nke ndị ọbịa ma ọ bụ ndị ọrụ gị, yabụ iji nyere ndị nwere ndị na-agụ ihuenyo na teknụzụ enyemaka yiri ya aka, ị kwesịrị ị kechie toast gị na aria-livempaghara . Ndị na-agụ ihuenyo na-ekwupụta mgbanwe na mpaghara ndị dị ndụ (dịka ịgbanye/imelite akụrụngwa toast) na-akpaghị aka na-enweghị mkpa ka onye ọrụ lekwasịrị anya ma ọ bụ kwụsịtụ onye ọrụ ahụ. Na mgbakwunye, gụnye aria-atomic="true"iji hụ na a na-ekwupụta ihe niile toast dị ka otu otu (atomic), kama ịkpọsa ihe gbanwere (nke nwere ike ibute nsogbu ma ọ bụrụ na ị na-emelite akụkụ nke ọdịnaya toast ahụ, ma ọ bụ ọ bụrụ na ị na-egosipụta otu ọdịnaya toast ahụ. n'oge gara aga). Ọ bụrụ na ozi achọrọ dị mkpa maka usoro ahụ, dịka ọmụmaatụ maka ndepụta njehie n'ụdị, wee jiri mpaghara njikerekama toast.

Rịba ama na mpaghara dị ndụ kwesịrị ịdị na akara ngosi tupu emelite ma ọ bụ emelite toast. Ọ bụrụ na ị na-ewepụta ha abụọ n'otu oge wee tinye ha n'ime ibe ahụ, teknụzụ enyemaka agaghị ekwupụta ha.

Ịkwesịrị ịmegharị rolena aria-liveọkwa dabere na ọdịnaya. Ọ bụrụ na ọ bụ ozi dị mkpa dị ka njehie, jiri role="alert" aria-live="assertive", ma ọ bụghị jiri role="status" aria-live="polite"njirimara.

Ka ọdịnaya ị na-egosipụta na-agbanwe, jide n'aka na imelite delayoge agwụla ka ndị ọrụ nwee oge zuru ezu iji gụọ 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>

Mgbe ị na-eji autohide: false, ị ga-atụkwasịrịrị bọtịnụ nso ka ndị ọrụ hapụ toast.

Ndewo Ụwa! Nke a bụ ozi 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>

Ọ bụ ezie na teknụzụ ọ ga-ekwe omume ịgbakwunye njikwa na-elekwasị anya / arụ ọrụ (dị ka bọtịnụ ndị ọzọ ma ọ bụ njikọ) na toast gị, ị kwesịrị ịzere ime nke a maka ikpuchi toasts. Ọbụna ma ọ bụrụ na ị na-enye toast ogologo delayoge , ahụigodo na ndị ọrụ teknụzụ enyemaka nwere ike isiri gị ike iru toast n'oge iji mee ihe (ebe ọ bụ na toasts anaghị enweta anya mgbe egosipụtara ha). Ọ bụrụ na ị ga-enwerịrị njikwa ndị ọzọ, anyị na-akwado iji toast na autohide: false.

Sass

Mgbanwe

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

Ojiji

Melite toasts site na Javascript:

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

Na-akpalite

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime toast dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ dị n'èzí toast na-eji data-bs-targetdị ka egosiri n'okpuru:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-animation="".

Aha	Ụdị	Ọdabara	Nkọwa
`animation`	boolean	`true`	Tinye mgbanwe mgbanwe CSS na toast
`autohide`	boolean	`true`	Zoo toast na akpaghị aka
`delay`	nọmba	`5000`	gbuo oge izobe toast (ms)

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

gosi

Na-ekpughe toast nke mmewere. Na-alaghachikwute onye na-akpọ oku tupu egosiri toast n'ezie (ya bụ tupu shown.bs.toastmmemme emee). Ị ga-eji aka gị kpọọ usoro a, kama nke ahụ toast gị agaghị egosi.

toast.show()

zoo

Na-ezobe toast nke mmewere. Na-alaghachikwuru onye na-akpọ oku tupu ezobe toast n'ezie (ya bụ tupu hidden.bs.toastmmemme emee). Ị ga-eji aka kpọọ usoro a ma ọ bụrụ na autohideịmere false.

toast.hide()

tufuo

Na-ezobe toast nke mmewere. Toast gị ga-anọgide na DOM mana ọ gaghị egosikwa ọzọ.

toast.dispose()

nweta ihe atụ

Usoro static nke na-enye gị ohere ịnweta ihe toast jikọtara ya na ihe DOM

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

nwetaOrCreateInstance

Usoro static nke na-enye gị ohere ịnweta ihe toast jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

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

Ihe omume

Ụdị mmemme	Nkọwa
`show.bs.toast`	Ihe omume a na-agba ọkụ ozugbo `show`a na-akpọ usoro ihe atụ.
`shown.bs.toast`	A na-agbapụ mmemme a mgbe onye ọrụ mere ka toast ahụ hụ ya.
`hide.bs.toast`	A na-agbapụ ihe omume a ozugbo `hide`a kpọrọ usoro ihe atụ.
`hidden.bs.toast`	A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ahụ toast.

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