Toasts

E hoʻolaha i nā leka hoʻomaopopo i kāu poʻe malihini me kahi toast, kahi leka makaʻala māmā a maʻalahi hoʻi.

Ma kēia ʻaoʻao

ʻO nā Toasts nā leka hoʻomaopopo māmā i hoʻolālā ʻia e hoʻohālike i nā leka hoʻolaha i hoʻolaha ʻia e nā ʻōnaehana kelepona a me nā papa hana. Ua kūkulu ʻia lākou me ka flexbox, no laila ua maʻalahi lākou e align a hoʻonohonoho.

Nānā nui

Nā mea e ʻike ai i ka hoʻohana ʻana i ka plugin toast:

Hoʻokomo ʻia nā toasts no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
E hūnā ʻokoʻa nā Toasts inā ʻaʻole ʻoe e kuhikuhi autohide: false.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Nā laʻana

Kumu

No ka hoʻoikaika ʻana i nā toast hiki ke hoʻonui a ʻike ʻia, paipai mākou i ke poʻo a me ke kino. Hoʻohana ʻia nā poʻomanaʻo Toast display: flex, e ʻae i ka alignment maʻalahi o ka ʻike e hoʻomaikaʻi i kā mākou margin a me flexbox pono.

Hiki ke maʻalahi nā toasts e like me kou makemake a he liʻiliʻi loa ka markup i koi ʻia. Ma ka liʻiliʻi loa, koi mākou i hoʻokahi mea e loaʻa i kāu ʻike "toasted" a paipai ikaika i kahi pihi hoʻokuʻu.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

Ma mua, ua hoʻohui ikaika kā mākou mau palapala i ka .hidepapa e hūnā loa i kahi meaʻai (me ka display:none, ma mua o ka opacity:0). ʻAʻole pono hou kēia i kēia manawa. Eia nō naʻe, no ka hoʻokō ʻana i hope, e hoʻomau kā mākou palapala i ka hoʻololi ʻana i ka papa (ʻoiai ʻaʻohe pono kūpono) a hiki i ka mana nui e hiki mai ana.

Laʻana ola

E kaomi i ke pihi ma lalo nei e hōʻike i kahi kīʻaha (i hoʻonoho ʻia me kā mākou mau pono hana ma ke kihi ʻākau haʻahaʻa) i hūnā ʻia e ka paʻamau.

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>

Hoʻohana mākou i kēia JavaScript e hoʻomaka i kā mākou demo toast ola:

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

    toast.show()
  })
}

Alohilohi

ʻO nā mea hoʻomaʻemaʻe he translucent iki e hui pū me nā mea ma lalo o lākou.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

Hoʻopaʻa

Hiki iā ʻoe ke hoʻopaʻa i nā toasts ma ke kāʻei ʻana iā lākou i loko o kahi pahu toast, kahi e hoʻonui ai i kahi ākea.

ʻIke? E like me kēia.

Nā poʻo i luna, e hoʻopaʻa maʻalahi nā toasts

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

Maʻiʻo maʻamau

Hoʻopilikino i kāu toasts ma ka wehe ʻana i nā ʻāpana ʻāpana, hoʻololi iā lākou me nā mea pono , a i ʻole ma ka hoʻohui ʻana i kāu markup ponoʻī. Ma ʻaneʻi ua hana mākou i kahi mea ʻai maʻalahi ma ka wehe ʻana i ka mea paʻamau .toast-header, hoʻohui i kahi kiʻi huna maʻamau mai Bootstrap Icons , a me ka hoʻohana ʻana i kekahi mau pono flexbox e hoʻoponopono i ka hoʻolālā.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻohui i nā mana hou a me nā ʻāpana i nā toasts.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

Nā kala kala

Ke kūkulu nei ma luna o ka laʻana i luna, hiki iā ʻoe ke hana i nā ʻano kala like ʻole me kā mākou kala a me kā mākou mau mea pono. Eia mākou i hoʻohui .bg-primarya .text-whitei ka .toast, a laila hoʻohui .btn-close-whitei kā mākou pihi pani. No ka ʻaoʻao ʻōniʻoniʻo, wehe mākou i ka palena paʻamau me .border-0.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

Hoʻokomo

E kau i nā toasts me ka CSS maʻamau e like me kou makemake. Hoʻohana pinepine ʻia ka ʻākau luna no ka hoʻolaha ʻana, e like me ka waena waena. Inā ʻoe e hōʻike ana i hoʻokahi toast i ka manawa, e kau pono i nā ʻano hoʻonohonoho ma ka .toast.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

No nā ʻōnaehana e hoʻopuka hou i nā leka hoʻomaopopo, e noʻonoʻo e hoʻohana i kahi mea hoʻopili i hiki iā lākou ke hoʻopaʻa maʻalahi.

ʻIke? E like me kēia.

Nā poʻo i luna, e hoʻopaʻa maʻalahi nā toasts

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

Hiki iā ʻoe ke leʻaleʻa me nā hāmeʻa flexbox e hoʻolike i nā toast ma ke alo a / a i ʻole ke kū pololei.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

Hiki ke komo

Manaʻo ʻia ʻo Toasts i mea hoʻopau liʻiliʻi i kāu poʻe kipa a mea hoʻohana paha, no laila e kōkua i ka poʻe me nā mea heluhelu pale a me nā ʻenehana kōkua like, pono ʻoe e hoʻopili i kāu toast ma kahi aria-liveʻāpana . Hoʻolaha ʻia nā hoʻololi ʻana i nā wahi ola (e like me ka injecting/hōʻano hou ʻana i kahi mea hoʻomake) e ka poʻe heluhelu pale me ka pono ʻole e hoʻoneʻe i ka manaʻo o ka mea hoʻohana a i ʻole ke hoʻopau i ka mea hoʻohana. Eia hou, e hoʻokomo aria-atomic="true"e hōʻoia i ka hoʻolaha mau ʻana o ka toast holoʻokoʻa ma ke ʻano he ʻāpana hoʻokahi (atomic), ma mua o ka hoʻolaha ʻana i ka mea i hoʻololi ʻia (hiki ke alakaʻi i nā pilikia inā ʻoe e hōʻano hou i kahi ʻāpana o ka ʻiʻo o ka toast, a i ʻole ke hōʻike ʻana i ka maʻiʻo toast like. i kekahi manawa ma hope aku). Inā he mea koʻikoʻi ka ʻike e pono ai no ke kaʻina hana, e laʻa no ka papa inoa o nā hewa ma kahi ʻano, a laila e hoʻohana i ka ʻāpana makaʻalama kahi o ka toast.

E hoʻomanaʻo pono e loaʻa ka ʻāina ola i ka markup ma mua o ka hana ʻana a i ʻole ka hoʻonui ʻia ʻana o ka toast. Inā hoʻoikaika ikaika ʻoe i ka manawa like a hoʻokomo iā lākou i loko o ka ʻaoʻao, ʻaʻole e hoʻolaha ʻia e nā ʻenehana kōkua.

Pono ʻoe e hoʻololi i ka rolea me ka aria-livepae ma muli o ka ʻike. Inā he memo koʻikoʻi e like me ka hewa, e hoʻohana role="alert" aria-live="assertive", a i ʻole e hoʻohana role="status" aria-live="polite"i nā ʻano.

Ke hoʻololi nei ka ʻike āu e hōʻike nei, e hōʻoia e hōʻano hou i ka delaymanawa pau i loaʻa i nā mea hoʻohana ka manawa e heluhelu ai i ka 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>

I ka hoʻohana ʻana iā autohide: false, pono ʻoe e hoʻohui i kahi pihi pani e ʻae i nā mea hoʻohana e hoʻopau i ka toast.

Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.

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

ʻOiai hiki i ka ʻenehana ke hoʻohui i nā mana kikoʻī/actionable (e like me nā pihi hou a i ʻole nā loulou) i kāu toast, pono ʻoe e pale i ka hana ʻana i kēia no ka huna ʻana i nā toasts. ʻOiai inā hāʻawi ʻoe i ka toast i kahi delaymanawa lōʻihi , paʻakikī paha nā mea hoʻohana ʻenehana kōkua i ka hiki ʻana i ka toast i ka manawa e hana ai (no ka mea, ʻaʻole i loaʻa ka manaʻo o ka toast ke hōʻike ʻia). Inā loaʻa iā ʻoe nā mana hou aʻe, paipai mākou e hoʻohana i ka toast me autohide: false.

Sass

Nā mea hoʻololi

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

Hoʻohana

E hoʻomaka i nā toast ma o JavaScript:

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

Nā mea hoʻoulu

Hiki ke hoʻokō ʻia ka hoʻokuʻu ʻana me ke ʻano datama kahi pihi i loko o ka toast e like me ka hōʻike ʻana ma lalo nei:

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

a i ʻole ma kahi pihi ma waho o ka mea ʻai me ka hoʻohana ʻana i ka data-bs-targetmea i hōʻike ʻia ma lalo nei:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-animation="".

inoa	ʻAno	Default	wehewehe
`animation`	boolean	`true`	E noi i kahi hoʻololi fade CSS i ka toast
`autohide`	boolean	`true`	Hūnā ʻakomi i ka ʻai
`delay`	helu	`5000`	Hoʻopaneʻe ka hūnā ʻana i ka ʻai (ms)

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

hōʻike

Hōʻike i kahi mea ʻai meaʻai. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.toasthanana). Pono ʻoe e kāhea lima i kēia ʻano hana, akā ʻaʻole e hōʻike ʻia kāu toast.

toast.show()

huna

Hūnā i ka ʻuala o kekahi mea. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.toasthanana). Pono ʻoe e kelepona lima i kēia ʻano hana inā ʻoe i hana autohidei false.

toast.hide()

e hoolei aku

Hūnā i ka ʻuala o kekahi mea. E mau ana kāu toast ma ka DOM akā ʻaʻole e hōʻike hou ʻia.

toast.dispose()

getInstance

ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana toast pili me kahi mea DOM

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

getOrCreateInstance

ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana toast e pili ana me kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

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

Nā hanana

ʻAno hanana	wehewehe
`show.bs.toast`	Hoʻomaka koke kēia hanana i ke `show`kāhea ʻia ʻana o ke ʻano hana.
`shown.bs.toast`	Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka mea hoʻohana.
`hide.bs.toast`	Hoʻopau koke ʻia kēia hanana i ka wā `hide`i kāhea ʻia ai ke ʻano hana.
`hidden.bs.toast`	Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana mai ka mea hoʻohana.

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