Source

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.

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

  • Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .
  • Hoʻokomo ʻia nā toasts no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
  • E ʻoluʻolu e hoʻomaopopo iā ʻoe ke kuleana no ka hoʻonohonoho ʻana i nā toasts.
  • 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 paipai ʻana i nā toast hiki ke hoʻonui ʻia a hiki ke wānana, 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 kāu e pono ai 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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Alohilohi

ʻO nā toasts he translucent liʻiliʻi hoʻi, no laila ua hui pū lākou me nā mea āpau i ʻike ʻia ma luna. No nā polokalamu kele pūnaewele e kākoʻo ana i ka backdrop-filterwaiwai CSS, e hoʻāʻo nō hoʻi mākou e hoʻopololei i nā mea ma lalo o kahi kīʻaha.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Hoʻopaʻa ʻana

Ke loaʻa iā ʻoe nā toasts he nui, paʻamau mākou i ka hoʻopaʻa ʻana iā lākou ma ke ʻano hiki ke heluhelu ʻia.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 ka ʻāpana o ka ʻai o ka toast, a i ʻole ke hōʻike ʻana i ka maʻiʻo toast like ma kahi 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 e hōʻoia i ka loaʻa ʻana o ka manawa o ka poʻe e heluhelu ai i ka toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ʻO ka hana JavaScript

Hoʻohana

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

$('.toast').toast(option)

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-, e like me ka data-animation="".

inoa ʻAno Default wehewehe
hoʻouluulu boolean ʻoiaʻiʻo E noi i kahi hoʻololi fade CSS i ka toast
huna auto boolean ʻoiaʻiʻo Hūnā ʻakomi i ka ʻai
lohi helu 500 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 .

$().toast(options)

Hoʻopili i kahi mea hoʻohana meaʻai i kahi hōʻiliʻili mea.

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

$('#element').toast('show')

.toast('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.

$('#element').toast('hide')

.toast('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.

$('#element').toast('dispose')

Nā hanana

ʻAno Hanana wehewehe
hōʻike.bs.toast Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia.bs.toast Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka mea hoʻohana.
huna.bs.toast Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
huna.bs.toast Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana mai ka mea hoʻohana. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})