in English

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.

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

Ola

Kiliki le ki lalo e fa'aali ai se toast (fa'atulagaina ma a matou mea aoga i le pito i lalo taumatau) lea na natia e ala i le fa'aletonu i le .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translucent

O toasts e fa'afefe teisi e fa'afefiloi ma mea o lo'o i lalo.

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

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

Bootstrap 11 minute talu ai
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.

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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ʻamautinoa o le toast atoa e faʻasalalau i taimi uma o se tasi (atomic) iunite, nai lo le naʻo le faʻasalalauina o mea na suia (lea e mafai ona 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 faʻaalia foi le mea e tasi o le toast. i 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 lava le taimi 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.

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

A'o fa'atekinisi e mafai ona fa'aopoopo i ai fa'atonuga fa'apitoa/fa'atino (pei o fa'amau fa'aopoopo po'o so'otaga) i lau fa'aliga, e tatau ona e 'alo'ese mai le faia o lea mea mo le fa'amama fa'atosina. Tusa lava pe e te tu'uina atu i le toast se taimi umi delay, o le keyboard ma tagata fa'aoga tekinolosi fesoasoani e ono faigata ona o'o i le toast i le taimi e fai ai se gaioiga (talu ai e le maua le taulaiga pe a fa'aalia). Afai e matua tatau lava ona i ai sau fa'atonuga atili, matou te fautuaina le fa'aaogaina o se toast ma autohide: false.

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 showvalaʻ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 hidevalaʻ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...
})