Toasts
Tu'i fa'amatalaga i au tagata asiasi i se fa'afefete, o se fe'au fa'ailo mama ma faigofie ona fa'avasega.
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
.
prefers-reduced-motion
aufaasā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>
.hide
vasega 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 le vasega a le matou tusitusiga (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.
<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" 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:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
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-primary
ma .text-white
i le .toast
, ona fa'aopoopo lea .btn-close-white
i 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
.
<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'aoga 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-live
itulagi . 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ʻalauiloaina 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 o fa'amatalaga e mana'omia e taua mo le fa'agasologa, 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 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 te manaʻomia foʻi e faʻafetaui le role
ma aria-live
le maualuga e faʻatatau i le anotusi. Afai o se fe'au taua e pei o se mea sese, fa'aaoga 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 delay
taimi 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'aina 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($black, .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($black, .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)
})
Fa'aoso
E mafai ona maua le fa'ate'aina i le data
uiga 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-target
fa'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
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'ia se auala e vala'au ai i se vaega o suiga .
fa'aali
Fa'aalia le toast a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia moni 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.
toast.show()
lalafi
Natia le toast a se elemene. Toe fo'i i le tagata vala'au a'o le'i natia 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
.
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 ona e maua le faʻataʻitaʻiga toast 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 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.
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 show vala'au le auala fa'ata'ita'i. |
shown.bs.toast |
O lenei mea e 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 |
E fa'amu le mea lea pe a uma ona natia le toast mai le tagata fa'aoga. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})