Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Toasts

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

I luga o lenei itulau

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:

  • O toasts e filifili i totonu mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e amataina oe lava ia .
  • 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 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>

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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

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

Fa'aputu

E mafai ona e fa'aputuina toasts e ala i le afifiina i totonu o se koneteina fa'afefete, lea e fa'aopoopo i luga sa'o sina avanoa.

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

Tulaga fa'apitoa

Fa'asinomaga au toasts e ala i le aveeseina o vaega laiti, tweaking i latou i mea aoga , po'o le fa'aopoopoina o lau lava fa'ailoga. O iinei ua matou fatuina ai se faʻafefe faigofie e ala i le aveesea o le faaletonu .toast-header, faʻaopoopo se faʻailoga masani natia mai Bootstrap Icons , ma faʻaaoga nisi faʻaoga flexbox e fetuunai ai le faʻatulagaina.

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

I le isi itu, e mafai fo'i ona e fa'aopoopo nisi fa'atonuga ma vaega i toasts.

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

Fa'ailoga lanu

Fausia i luga o le faʻataʻitaʻiga o loʻo i luga, e mafai ona e faia ni faʻailoga lanu toast eseese ma a matou lanu ma faʻaoga aoga. O lea ua matou fa'aopoopo .bg-primaryma .text-whitei le .toast, ona fa'aopoopo lea .btn-close-whitei la matou faamau tapuni. Mo se pito mata'utia, matou te aveese le tuaoi le talafeagai ma .border-0.

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

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

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

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

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

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.

Sass

Fuafuaga

$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(0, 0, 0, .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(0, 0, 0, .05);

Fa'aoga

Amata toasts e ala ile JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, 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-bs-, pei o le data-bs-animation="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
animation boolean true Fa'aaoga se suiga fa'ale'ale CSS i le toast
autohide boolean true Otometi nana le toast
delay numera 5000 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 .

fa'aali

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.

toast.show()

lalafi

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.

toast.hide()

lafoa'i

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

toast.dispose()

getInstance

Metotia static lea e mafai ai e oe ona maua le scrollspy faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM

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

getOrCreateInstance

Metotia static lea e mafai ai e oe ona maua le scrollspy faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou i le tulaga e leʻi amataina.

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

Mea na tutupu

Ituaiga mea na tupu Fa'amatalaga
show.bs.toast E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
shown.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. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})