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.

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

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>

I le taimi muamua, o matou tusitusiga na faʻaopoopoina faʻamalosi le .hidevasega e natia atoa ai se toast (ma display:none, nai lo na o le opacity:0). Ua le toe mana'omia nei. Ae peita'i, mo le fetaui i tua, o le a fa'aauau pea ona fesuia'i a tatou tusitusiga i le vasega (e ui lava e leai se mea e mana'omia) se'ia o'o i le isi fa'asologa tele.

Fa'ata'ita'iga ola

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

Hello, world! This is a toast message.

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

Matou te faʻaogaina le JavaScript lea e faʻaoso ai la matou faʻataʻitaʻiga 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()
  })
}

Translucent

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

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

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>

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.

Vaai? E pei lava o lenei.

Ulu i luga, toasts o le a faaputu otometi

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>

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.

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

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>

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

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

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>

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 .text-bg-primaryi le .toast, ona fa'aopoopo lea .btn-close-whitei la matou ki tapuni. Mo se pito mata'utia, matou te aveese le tuaoi le talafeagai ma .border-0.

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

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>

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.

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>

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

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>

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.

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>

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.

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

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>

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.

CSS

Fuafuaga

Fa'aopoopo i le v5.2.0

I le avea ai o se vaega o le suiga o le CSS suiga a le Bootstrap, o loʻo faʻaogaina nei e toasts suiga CSS faʻapitonuʻu i luga .toastmo le faʻaleleia o le taimi moni aganuʻu. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

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

Sass fesuiaiga

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

Fa'aoga

Amata toasts e ala ile JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Fa'aoso

E mafai ona maua le fa'ate'aina i le datauiga i luga o se fa'amau i totonu o le toast e pei ona fa'aalia i lalo:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

po'o luga o se fa'amau i fafo o le toast fa'aaoga le data-bs-targetfa'ata'ita'iga i lalo:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Filifiliga

A'o mafai ona pasia filifiliga e ala i fa'amatalaga uiga po'o le JavaScript, e mafai ona e fa'aopoopoina se igoa filifiliga i le data-bs-, pei o le data-bs-animation="{value}". Ia mautinoa e sui le ituaiga mataupu o le igoa filifiliga mai le " CamelCase " i le " kebab-case " pe a pasia filifiliga e ala i faʻamatalaga uiga. Mo se faʻataʻitaʻiga, faʻaaoga data-bs-custom-class="beautifier"nai lo le data-bs-customClass="beautifier".

E pei o le Bootstrap 5.2.0, o vaega uma e lagolagoina se faʻataʻitaʻiga faʻaagaga faʻamaumauga uiga data-bs-confige mafai ona faʻapipiʻi faigofie vaega faʻapipiʻi o se manoa JSON. Afai ei ai se elemene data-bs-config='{"delay":0, "title":123}'ma data-bs-title="456"uiga, o le titletau mulimuli o le ai ai 456ma o faʻamatalaga faʻamatalaga uiga ese o le a faʻamalo ai tau o loʻo tuʻuina atu ile data-bs-config. E le gata i lea, o faʻamaumauga o loʻo i ai nei e mafai ona faʻapipiʻi JSON tau pei o data-bs-delay='{"show":0,"hide":150}'.

Igoa	Ituaiga	Fa'atonu	Fa'amatalaga
`animation`	boolean	`true`	Fa'aaoga se CSS fade fade suiga i le toast.
`autohide`	boolean	`true`	Otometi natia le toast pe a uma le tuai.
`delay`	numera	`5000`	Fa'atuai ile millisecond a'o le'i nanaina le toast.

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 .

Metotia	Fa'amatalaga
`dispose`	Natia le toast a se elemene. O le a tumau lau toast ile DOM ae e le toe fa'aalia.
`getInstance`	Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga toast e fesoʻotaʻi ma se elemene DOM. Mo se fa'ata'ita'iga: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Fa'afo'i mai se fa'ata'ita'iga toast Bootstrap.
`getOrCreateInstance`	Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga toast e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou, i le tulaga e leʻi amataina. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Fa'afo'i mai se fa'ata'ita'iga toast Bootstrap.
`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.toast`mea na tupu). E tatau ona e vala'au ma le lima lenei metotia pe a e faia `autohide`i `false`.
`isShown`	Fa'afo'i se boolean e tusa ai ma le tulaga va'aia o le 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.toast`mea na tupu). E tatau ona e vala'au ma le lima lenei metotia, ae e le fa'aalia lau toast.

Mea na tutupu

Mea na tupu	Fa'amatalaga
`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.
`show.bs.toast`	E mu vave lenei mea pe a `show`valaʻ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.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})