Notification
Messaggio di testo a comparsa per informare l’utente di eventi, aggiornamenti o azioni che richiedono la sua attenzione.
Le notifiche vengono utilizzate per portare l’attenzione dell’utente su un messaggio o un cambiamento di stato. Es: la ricezione di una nuova email.
Lo stato naturale dell’elemento è invisibile. Gli esempi di questa pagina sono stati resi statici per facilitare un confronto fra le varie tipologie.
Il comportamento delle notifiche è verificabile sulla pagina di esempio.
Accessibilità
Negli esempi è stato utilizzato il tag h2 per il titolo delle notifiche.
Utilizzare il tag h corretto a seconda del contesto.
Per ragioni di accessibilità è necessario:
- che il titolo
<h...>contenuto nella notifica abbia un ID univoco - che questo ID venga usato come valore della proprietà
aria-labelledbynel<div>della notifica - che il
<div>della notifica abbia la proprietàrole="alert"
Esempio
La notifica può essere composta da un solo titolo oppure da un titolo accompagnato da icona, contenuta nel tag <h5> del titolo. In questo caso l’elemento dovrà avere la classe .with-icon.
Notification standard
Titolo notifica
Notification con icona
Testo supplementare
Si può aggiungere un breve testo al di sotto del titolo utilizzando un tag <p>.
Notifica standard con testo
Titolo notifica
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Notifica con icona e testo
Pulsante di chiusura
Le notifiche con pulsante di chiusura non vengono nascoste dopo un intervallo di tempo ma vengono chiuse solo quando si clicca sul rispettivo pulsante di chiusura.
Notifica con pulsante di chiusura
Titolo notifica
Notifica con pulsante di chiusura e icona
Stati
Alle notifiche possono essere applicate classi aggiuntive che ne determinano lo stato modificando il colore delle icone e del bordo:
.success- per messaggi di procedure andate a buon fine.error- per messaggi di errore.info- per info generiche.warning- per messaggi di precauzione
Successo
Errore
Info
Precauzione
Posizione
La posizione predefinita delle notifiche è nella parte destra inferiore della finestra.
Utilizzando le classi aggiuntive di posizione fissa elencate di seguito la notifica verrà posizionata a filo di uno dei margini indicati, modificando l’arrotondamento degli angoli di conseguenza.
Posizione su mobile
Le classi di posizione non influenzano il posizionamento su device mobile dove la notifica è sempre a piede della finestra e ne occupa tutta la larghezza.
Posizione predefinita
Posizionamento predefinito della notifica.
Posizione fissa
Esempi delle quattro posizioni fisse possibili.
Attivazione tramite codice
Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica
utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione.
Nel caso in cui si desidera importare e inizializzare autonomamente il componente
l’attributo data-bs-toggle specifico non deve essere incluso così da evitare
inizializzazioni automatiche che possono portare a comportamenti inaspettati.
Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.
Il plugin per le notifiche attiva/disattiva il suo contenuto nascosto su richiesta, tramite attributi data o tramite JavaScript.
Tramite data attributes
Attiva una notifica senza scrivere codice JavaScript. Imposta data-bs-toggle="notification" su un elemento di controllo, come un
pulsante, insieme a data-bs-target="#foo" o href="#foo" per attivare/disattivare una specifica notifica.
È possibile specificare il tempo di permanenza della notifica mediante l’attributo data-bs-timeout: il suo valore rappresenta i millisecondi nei quali la notifica resterà visibile.
1
<button type="button" data-bs-toggle="notification" data-bs-target="#myNotification" data-bs-timeout="5000">Lancia la notifica</button>
L’attributo data-bs-timeout può essere assegnato anche direttamente al componente notifica. In tal caso non sarà necessario assegnarlo anche al pulsante di avvio. Se l’attributo è specificato anche nel pulsante di avvio, verrà preso come tempo di permanenza della notifica il valore di quest’ultimo.
1
2
3
<div class="notification fade" data-bs-timeout="7000" role="alert" id="myNotification" aria-labelledby="not0-title">
<h5 id="not0-title">Notification</h5>
</div>
Tramite JavaScript
Richiama una notifica con id myNotification con una singola riga di JavaScript:
1
2
3
import { Notification } from 'bootstrap-italia';
const myNotification = new Notification(document.getElementById('myNotification'), options)
Opzioni
Durante la creazione di un’istanza Notification è possibile passare un oggetto per la configurazione.
1
2
3
4
5
import { Notification } from 'bootstrap-italia';
const myNotification = new Notification(document.getElementById('myNotification'), {
timeout: 2000,
})
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| timeout | numero | 2000 | Durata di permanenza della notifica in millisecondi. Sostituisce l'attributo data-bs-timeout. |
Metodi
Metodi asincroni e transizioni
Tutti i metodi API sono asincroni e avviano una transizione. Ritornano al chiamante non appena viene avviata la transizione ma prima che termini. Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata.
Per maggiori informazioni consulta la documentazione Javascript di Bootstrap (in inglese).
| Metodo | Descrizione |
|---|---|
| show | Mostra la notifica. È possibile passare come parametro il valore in millisecondi di permanenza della notifica. Se non viene specificato, il tempo di permanenza della notifica verrà ricavato dal parametro di configurazione `timeout` o dal data attribute `data-bs-timeout`. |
| hide | Nasconde la notifica. |
| toggle | Mostra/nasconde la notifica. |
Properties
La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.
| Variabile CSS | Descrizione (Inglese) | Predefinito |
|---|---|---|
--bsi-notification-background |
var(--bsi-color-background-inverse) |
|
--bsi-notification-border-color |
var(--bsi-color-border-subtle) |
|
--bsi-notification-box-shadow |
var(--bsi-elevation-medium) |
|
--bsi-notification-inset-line-width |
var(--bsi-border-thick) |
|
--bsi-notification-inset-line-color |
var(--bsi-color-border-primary) |
|
--bsi-notification-padding-x |
var(--bsi-spacing-s) |
|
--bsi-notification-padding-y |
var(--bsi-spacing-s) |
|
--bsi-notification-padding-right |
calc(var(--bsi-spacing-m) + var(--bsi-spacing-xl)) |
|
--bsi-notification-position-distance |
var(--bsi-spacing-xxs) |
|
--bsi-notification-title-color |
var(--bsi-color-text-base) |
|
--bsi-notification-title-font-size |
var(--bsi-heading-6-font-size) |
|
--bsi-notification-text-color |
var(--bsi-color-text-secondary) |
|
--bsi-notification-text-font-size |
var(--bsi-label-font-size) |
|
--bsi-notification-position-distance |
var(--bsi-spacing-s) |
Breaking changes
- Rinominato il componente da
NotificheaNotification. - Aggiunta la classe
.notification-titleal titolo della notifica. - Aggiunta la classe
.icon-small’icona<svg>del titolo della notifica. - Aggiunta la classe
.me-2all’icona<svg>del titolo della notifica. - Aggiunta la classe
.icon-small’icona<svg>del pulsante di chiusura.btn-close.