Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

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.

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

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

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

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

    toast.show()
  })
}

Alohilohi

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

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>

Hoʻopaʻa ʻana

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.

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>

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

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>

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

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>

Nā kala kala

Ke kūkulu ʻana 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 mea pono. Eia mākou i hoʻohui .text-bg-primaryi 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.

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>

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.

Bootstrap 11 minuke aku nei
Aloha, honua! ʻO kēia ka leka hoʻomaʻamaʻa.
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>

No nā ʻōnaehana hoʻolaha hou aku, e noʻonoʻo e hoʻohana i kahi mea wīwī i hiki iā lākou ke hoʻopaʻa maʻalahi.

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>

Hiki iā ʻoe ke leʻaleʻa me nā pono hana flexbox e hoʻohālikelike i nā toasts ma ke alo a / a i ʻole ke kū pololei.

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>

Hiki ke komo

Manaʻo ʻia ʻo Toasts i mea hoʻopau liʻiliʻi i kāu poʻe malihini a i ʻole mea hoʻohana, 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 hoʻopiʻi ʻana/hōʻano hou ʻana i kahi ʻāpana toast) 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 ʻai 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.

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>

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

CSS

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻololi ʻana o ka CSS variables a Bootstrap, hoʻohana nā toasts i nā ʻano CSS kūloko .toastno ka hoʻomaikaʻi ʻana i ka manawa maoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

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

Nā hoʻololi Sass

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

Hoʻohana

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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, hiki iā ʻoe ke hoʻohui i kahi inoa koho i data-bs-, e like me ka data-bs-animation="{value}". E hōʻoia e hoʻololi i ke ʻano hihia o ka inoa koho mai " CamelCase " i " kebab-case " i ka wā e hāʻawi ai i nā koho ma o nā ʻano ʻikepili. No ka laʻana, hoʻohana data-bs-custom-class="beautifier"ma kahi o data-bs-customClass="beautifier".

E like me Bootstrap 5.2.0, kākoʻo nā ʻāpana āpau i kahi hiʻohiʻona ʻikepili i mālama ʻiadata-bs-config i hiki ke mālama i ka hoʻonohonoho ʻāpana maʻalahi ma ke ʻano he kaula JSON. Ke loaʻa nā ʻano mea data-bs-config='{"delay":0, "title":123}'a me data-bs-title="456"nā ʻano, ʻo ka titlewaiwai hope loa 456a na nā ʻano ʻikepili kaʻawale e kāpae i nā waiwai i hāʻawi ʻia ma data-bs-config. Eia kekahi, hiki i nā ʻikepili ʻikepili ke hoʻopaʻa i nā waiwai JSON e like me data-bs-delay='{"show":0,"hide":150}'.

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 toast ma hope o ka lohi.
delay helu 5000 Hoʻopaneʻe i nā milliseconds ma mua o ka hūnā ʻana i ka mea ʻai.

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 .

Kaʻina hana wehewehe
dispose 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.
getInstance ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana toast pili me kahi mea DOM.
No ka laʻana: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Hoʻihoʻi i kahi laʻana toast Bootstrap.
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.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Hoʻihoʻi i kahi laʻana toast Bootstrap.
hide 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.
isShown Hoʻihoʻi i kahi boolean e like me ke kūlana ʻike o ka toast.
show Hōʻike i kahi mea ʻai meaʻai. E 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.

Nā hanana

Hanana wehewehe
hide.bs.toast Hoʻopau koke ʻia kēia hanana i ka wā hidei 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.
show.bs.toast Hoʻomaka koke kēia hanana i ke showkā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. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})