Toasts
Push notifiche à i vostri visitatori cù un brindisi, un missaghju d'alerta ligeru è facilmente persunalizabile.
I brindisi sò notifiche ligeri pensate per imità e notificazioni push chì sò state popularizate da i sistemi operativi mobili è desktop. Sò custruiti cù flexbox, cusì sò faciuli d'allineà è di pusà.
Panoramica
Cose da sapè quandu si usa u plugin toast:
- I brindisi sò opt-in per ragioni di rendiment, cusì duvete inizializzalli voi stessu .
- I brindisi si nasconderanu automaticamente se ùn specificate micca
autohide: false
.
prefers-reduced-motion
media query. Vede a
sezione di movimentu ridottu di a nostra documentazione d'accessibilità .
Esempii
Basic
Per incuragisce i brindisi extensibili è prevedibili, ricumandemu un capu è un corpu. L'intestazione di Toast usanu display: flex
, chì permettenu un allinamentu faciule di u cuntenutu grazia à i nostri utilità di marge è flexbox.
I brindisi sò quant'è flessibili cum'è avete bisognu è anu pocu marcatu necessariu. À u minimu, avemu bisognu di un unicu elementu per cuntene u vostru cuntenutu "toastu" è incuragisce fermamente un buttone di scartà.
<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>
Live
Cliccate u buttone sottu per vede un brindisi (pusitu cù i nostri utilità in l'angulu inferjuri à diritta) chì hè statu oculatu per difettu cù .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>
Traslucente
I toast sò ligeramente traslucidi per mischjà cù ciò chì ci hè sottu.
<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>
Stacking
Pudete stack toasts impannillanduli in un cuntainer di toast, chì aghjunghje verticalmente un pocu di spazii.
<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>
Cuntinutu persunalizatu
Personalizà i vostri brindisi sguassate i sub-cumpunenti, aghjustendu cù utilità , o aghjunghjendu u vostru propiu marcatu. Quì avemu creatu un brindisi più simplice sguassendu u predeterminatu .toast-header
, aghjunghjendu un icona di nasconde persunalizata da Bootstrap Icons , è utilizendu qualchi utilità di flexbox per aghjustà u layout.
<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>
In alternativa, pudete ancu aghjunghje cuntrolli è cumpunenti supplementari à i brindisi.
<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>
Schemi di culori
Basendu nantu à l'esempiu di sopra, pudete creà diversi schemi di culore di toast cù i nostri utilità di culore è di fondu . Quì avemu aghjustatu .bg-primary
è .text-white
à u .toast
, è dopu aghjustatu .btn-close-white
à u nostru buttone vicinu. Per un bordu croccante, eliminemu u cunfini predeterminatu cù .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>
Placement
Pone i brindisi cù CSS persunalizati cum'è ne avete bisognu. A cima à diritta hè spessu usata per e notificazioni, cum'è a cima media. Sè vo site solu per mostrà un brindisi à u tempu, mette i stili di pusizzioni ghjustu nantu à u .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>
Per i sistemi chì generanu più notificazioni, cunzidira l'usu di un elementu di imballaggio per pudè stack facilmente.
<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>
Pudete ancu fà fantasia cù l'utilità flexbox per allineà i tostati orizontali è / o verticali.
<!-- 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>
L'accessibilità
I brindisi sò destinati à esse picculi interruzzioni à i vostri visitatori o utilizatori, cusì per aiutà à quelli chì anu lettori di schermu è tecnulugii d'assistenza simili, duvete imballà i vostri brindisi in una aria-live
regione . I cambiamenti à e regioni in diretta (cum'è l'iniezione / l'aghjurnà di un cumpunente di brindisi) sò automaticamente annunziati da i lettori di schermu senza avè bisognu di spustà u focus di l'utilizatore o altrimenti interrompe l'utilizatore. Inoltre, include aria-atomic="true"
per assicurà chì tuttu u brindisi hè sempre annunziatu cum'è una sola unità (atomica), piuttostu cà solu annunzià ciò chì hè statu cambiatu (chì puderia purtà à prublemi se aghjurnà solu una parte di u cuntenutu di u brindisi, o se mostra u listessu cuntenutu di brindisi). à un puntu dopu in u tempu). Se l'infurmazioni necessarii sò impurtanti per u prucessu, per esempiu per una lista di errori in una forma, allora utilizate u cumpunente d'alertainvece di toast.
Nota chì a regione live deve esse presente in u marcatu prima chì u brindisi hè generatu o aghjurnatu. Se generate dinamicamente tramindui à u stessu tempu è inject in a pagina, in generale ùn saranu micca annunziati da e tecnulugia assistive.
Avete ancu bisognu di adattà u livellu role
è aria-live
secondu u cuntenutu. S'ellu hè un missaghju impurtante cum'è un errore, utilizate role="alert" aria-live="assertive"
, altrimente utilizate role="status" aria-live="polite"
attributi.
Siccomu u cuntenutu chì mostrate cambia, assicuratevi di aghjurnà u delay
timeout per chì l'utilizatori anu abbastanza tempu per leghje u brindisi.
<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>
Quandu si usa autohide: false
, duvete aghjunghje un buttone vicinu per permette à l'utilizatori di scaccià u brindisi.
<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>
Mentre tecnicamente hè pussibule aghjunghje cuntrolli focusable / accionabili (cum'è buttoni supplementari o ligami) in u vostru brindisi, avete da evità di fà questu per i brindisi autohiding. Ancu s'ellu dà u brindisi assai delay
tempu , l'utilizatori di u teclatu è di a tecnulugia di assistenza ponu truvà difficiuli di ghjunghje à u brindisi à tempu per piglià l'azzione (perchè i brindisi ùn ricevenu micca focus quandu sò affissati). Se avete bisognu di più cuntrolli, ricumandemu d'utilizà un brindisi cù autohide: false
.
Sass
Variabili
$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);
Usu
Inizializza i brindisi via JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Opzioni
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-
, cum'è in data-bs-animation=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
animation |
booleanu | true |
Applica una transizione di fade CSS à u brindisi |
autohide |
booleanu | true |
Oculta automaticamente u brindisi |
delay |
numeru | 5000 |
Ritarda di ammuccià u brindisi (ms) |
I metudi
Metudi asincroni è transizioni
Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .
Vede a nostra documentazione JavaScript per più infurmazione .
mostra
Revela un brindisi di l'elementu. Ritorna à u chjamante prima chì u brindisi hè statu veramente mostratu (vale à dì prima chì l' shown.bs.toast
avvenimentu si faci). Avete da chjamà manualmente stu metudu, invece u vostru brindisi ùn mostrarà micca.
toast.show()
ammuccià
Nasconde u brindisi di un elementu. Ritorna à u chjamante prima chì u brindisi hè statu oculatu (vale à dì prima chì l' hidden.bs.toast
avvenimentu si faci). Avete da chjamà manualmente stu metudu se avete fattu autohide
à false
.
toast.hide()
disposti
Nasconde u brindisi di un elementu. U vostru brindisi fermarà nantu à u DOM ma ùn si mostra più.
toast.dispose()
getInstance
Metudu staticu chì permette di ottene l'istanza scrollspy assuciata à un elementu DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Metudu staticu chì vi permette di ottene l'istanza scrollspy assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Avvenimenti
Tipu di avvenimentu | Descrizzione |
---|---|
show.bs.toast |
Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
shown.bs.toast |
Questu avvenimentu hè sparatu quandu u brindisi hè statu resu visibile à l'utilizatore. |
hide.bs.toast |
Questu avvenimentu hè sparatu immediatamente quandu u hide metudu di istanza hè statu chjamatu. |
hidden.bs.toast |
Questu avvenimentu hè sparatu quandu u brindisi hà finitu di esse oculatu da l'utilizatore. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})