Toasts

Tu'i fa'amatalaga i au tagata asiasi i se toast, se fe'au mataala mama ma faigofie fa'apitoa.

Toasts o faʻamatalaga mama ua fuafuaina e faʻataʻitaʻi ai faʻasalalauga faʻasalalau lea na faʻalauiloaina e le telefoni feaveaʻi ma le desktop operating system. E fausia i le flexbox, ina ia faigofie ona fa'aoga ma fa'atulaga.

Vaaiga lautele

Mea e tatau ona iloa pe a faʻaaogaina le toast plugin:

Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js .
O toasts e filifili i totonu mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e amataina oe lava ia .
Faamolemole ia matau o oe e nafa ma le faatulagaina o toasts.
Toasts o le a otometi ona nana pe a e le faʻamaonia autohide: false.

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasālalau. Va'ai le vaega fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .

Faataitaiga

Fa'avae

Ina ia faʻamalosia le faʻalauteleina ma vaʻaia toasts, matou te fautuaina se ulutala ma le tino. Fa'aoga ulutala Toast display: flex, fa'ataga faigofie le fa'aogaina o mea fa'afetai i la matou pito ma fa'aoga flexbox.

Toasts e fetuutuunai e pei ona e manaʻomia ma e itiiti lava se faʻailoga manaʻomia. I se tulaga maualalo, matou te manaʻomia se elemene e tasi e aofia ai lau mea e "toʻai" ma faʻamalosia malosi se ki faʻateʻa.

Talofa, lalolagi! O le fe'au toast lea.

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

Translucent

O toasts e fai sina moli, o lea e faʻafefiloi i luga o soʻo se mea e foliga mai ai. Mo tagata su'esu'e e lagolagoina le backdrop-filtermeatotino CSS, matou te taumafai fo'i e fa'anenefu elemene i lalo o le toast.

Talofa, lalolagi! O le fe'au toast lea.

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

Fa'aputu

A tele au toasts, matou te le mafai ona fa'aputu fa'atutusa i se auala faigofie.

Vaai? E pei lava o lenei.

Ulu i luga, toasts o le a faaputu otometi

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

Tulaga

Tu'u toasts ile custom CSS pe ae mana'omia. O le pito i luga taumatau e masani ona faʻaoga mo faʻamatalaga, e pei o le ogatotonu pito i luga. Afai e na'o le tasi lava le mea'ai e te fa'aali i le taimi, tu'u sa'o sitaili fa'atulagaina i luga o le .toast.

Talofa, lalolagi! O le fe'au toast lea.

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

Mo faiga e maua ai nisi fa'amatalaga, mafaufau e fa'aaoga se elemene afifi ina ia faigofie ona fa'aputu.

Vaai? E pei lava o lenei.

Ulu i luga, toasts o le a faaputu otometi

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

E mafai fo'i ona e fa'afiafia i mea fa'aoga flexbox e fa'aoga ai toasts fa'alava ma/po'o tu'usa'o.

Talofa, lalolagi! O le fe'au toast lea.

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

Avanoa

Toasts e fa'amoemoe e fai ma fa'alavelave laiti i au tagata asiasi po'o tagata fa'aoga, ina ia fesoasoani ia i latou o lo'o i ai le faitau mata'itusi ma isi tekinolosi fesoasoani tutusa, e tatau ona e afifi au toasts i se aria-liveitulagi . Suiga i itulagi ola (e pei o le tui/fa'afouina o se vaega toast) e otometi lava ona fa'asalalauina e le au faitau mata'itusi e aunoa ma le mana'omia e fa'agaoioi le taulaiga a le tagata fa'aoga pe fa'alavelaveina le tagata fa'aoga. E le gata i lea, ia aofia aria-atomic="true"ai le faʻamautinoaina o le toast atoa e faʻasalalau i taimi uma o se tasi (atomic) iunite, nai lo le faʻailoaina o mea na suia (lea e ono oʻo atu ai i faʻafitauli pe afai e te faʻafouina se vaega o mea o loʻo i totonu o le toast, pe a faʻaalia le mea e tasi o le toast i le se taimi mulimuli ane). Afai ole fa'amatalaga e mana'omia e taua mo le fa'agaioiga, fa'ata'ita'iga mo se lisi o mea sese i se fomu, ona fa'aoga lea o le vaega mataalanai lo le toast.

Manatua o le itulagi ola e tatau ona i ai i le faʻailoga aʻo leʻi faia le toast pe faʻafouina. Afai e te fa'atupuina fa'amalosi mea uma i le taimi e tasi ma tui i latou i totonu o le itulau, e masani lava e le fa'asalalauina e tekinolosi fesoasoani.

E manaʻomia foʻi ona e faʻafetaui le rolema aria-livele maualuga e faʻatatau i mea o loʻo i totonu. Afai o se fe'au taua e pei o se mea sese, fa'aoga role="alert" aria-live="assertive", a leai fa'aaoga role="status" aria-live="polite"uiga.

A'o suia le anotusi o lo'o e fa'aalia, ia mautinoa e fa'afou le delaytaimi fa'agata ina ia mautinoa e lava le taimi o tagata e faitau ai le 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>

A fa'aoga autohide: false, e tatau ona e fa'aopoopoina se ki tapuni e fa'ataga ai tagata fa'aoga e fa'ate'a le toast.

Talofa, lalolagi! O le fe'au toast lea.

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

Amioga JavaScript

Fa'aoga

Amata toasts e ala ile JavaScript:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Igoa	Ituaiga	Fa'atonu	Fa'amatalaga
animation	boolean	moni	Fa'aaoga se suiga fa'ale'ale CSS i le toast
natia ta'avale	boolean	moni	Otometi nana le toast
tuai	numera	`500`	Fa'atuai natia le toast (ms)

Metotia

Metotia ma suiga e le tutusa

O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga .

`$().toast(options)`

Fa'apipi'i se fa'asusu fa'ainu i se fa'aputuga elemene.

`.toast('show')`

Fa'aalia le toast a se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia le toast (fa'atusa a'o le'i tupu le shown.bs.toastmea na tupu). E tatau ona e vala'au ma le lima lenei metotia, ae e le fa'aalia lau toast.

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

`.toast('hide')`

Natia le toast a se elemene. Toe fo'i i le tagata vala'au a'o le'i natia moni le toast (fa'atusa a'o le'i tupu le hidden.bs.toastmea na tupu). E tatau ona e vala'au ma le lima lenei metotia pe a e faia autohidei false.

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

`.toast('dispose')`

Natia le toast a se elemene. O le a tumau lau toast ile DOM ae e le toe fa'aalia.

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

Mea na tutupu

Ituaiga Mea	Fa'amatalaga
show.bs.toast	E mu vave lenei mea pe a `show`valaʻau le auala faʻataʻitaʻiga.
fa'aalia.bs.toast	O lenei mea na tupu e faʻamalo pe a faʻaalia le toast i le tagata faʻaoga.
hide.bs.toast	O lenei mea na tupu e faʻamalo vave pe a `hide`valaʻau le auala faʻataʻitaʻiga.
hidden.bs.toast	O lenei mea e tupu e faʻamalo pe a maeʻa ona natia le toast mai le tagata faʻaoga.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})