Per attirare l’attenzione su brevi messaggi di stato
La Notification viene utilizzata 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 Notification è verificabile sulla pagina di esempio.
La Notification appare quando viene attivata dalla seguente funzione Javascript:
notificationShow('idNotification',6000)
Il primo parametro, la stringa idNotification, corrisponde alla proprietà id del <div> della Notification <div class="notification" id="idNotification">...</div>
il secondo parametro (opzionale) corrisponde alla durata di visualizzazione in millisecondi. Il valore di default, se non indicato, è di 7000ms ossia 7 secondi.
Accessibilità
Per ragioni di accessibilità è necessario:
che il titolo <h5> contenuto nella Notification abbia un ID univoco
che questo ID venga usato come valore della proprietà aria-labelledby nel <div> della Notification
che il <div> della Notification abbia la proprietà role="alert"
Esempio
La Notification può essere composta da un solo titolo oppure da un titolo accompagnato da icona, contentuta nel tag <h5> del titolo. In questo caso l’elemento dovrà avere la classe .with-icon.
Notification standard
Titolo notifica
Notification con icona
Titolo notifica
Notification con messaggio
Si può aggiungere un breve testo al di sotto del titolo utilizzando un tag <p>.
Notification standard con testo
Titolo notifica
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Notification con icona e testo
Titolo notifica
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Dismissable
Le Notification Dismissable non vengono nascoste dopo un intervallo di tempo ma vengono chiuse solo quando si clicca sul rispettivo bottone di chiusura.
Utilizzare una classe aggiuntiva .dismissable per ottenere questo comportamento.
Notification dismissable con testo
Titolo notifica
Notification dismissable con icona e testo
Titolo notifica
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Stati
Alle Notification 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
Titolo notifica
Errore
Titolo notifica
Info
Titolo notifica
Avvertenza
Titolo notifica
Posizione e arrotondamento degli angoli
La posizione predefinita della Notification è nella parte destra inferiore della finestra.
Utilizzando le classi aggiuntive di posizione fissa elencate di seguito la Notification verrà posizionata a filo di uno dei margini indicati, modificando l’arrotondamento degli angoli di conseguenza.
N.B. queste classi non influenzano il posizionamento su device mobile, in questo caso la Notification è sempre a piede della finestra e ne occupa tutta la larghezza
Basico (arrotondamento ai 4 angoli)
Titolo notifica
top-fix
Titolo notifica
bottom-fix
Titolo notifica
left-fix
Titolo notifica
right-fix
Titolo notifica
Posizione predefinita
Posizionamento predefinito della Notification.
Titolo notifica
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Posizione fissa
Esempi delle quattro posizioni fisse possibili.
Top fix
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Bottom fix
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…