Toast

I toast sono utilizzati per mostrare all'utente brevi avvisi in maniera "soft", ovvero messaggi che appaiono solo per pochi secondi in alto a destra dello schermo.
A differenza delle modali, utili in caso di notifiche bloccanti, i toast hanno lo scopo di comunicare all'utente informazioni a bassa priorità, pertanto non richiedono azioni da parte dell'utente per proseguire la navigazione.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per le notifiche di tipo toast dell'Ecosistema digitale Turismo Cultura. 

                                            
<div class="dms-toast--wrapper">

    <!-- toast di successo -->
    <div class="dms-toast dms-toast--success" role="alert" aria-live="assertive" style="display:none">
        <div class="d-flex align-items-center justify-content-start">
            <div class="icon-wrapper">
                <i class="dms-wk-icon-success"></i>
            </div>
            <span>Modifiche salvate con successo!</span>
        </div>
        <button type="button" class="close" aria-label="close">
            <i class="dms-wk-icon-close"></i>
        </button>
    </div>

    <!-- toast di attenzione -->
    <div class="dms-toast dms-toast--warning" role="alert" aria-live="assertive" style="display:none">
        <div class="d-flex align-items-center justify-content-start">
            <div class="icon-wrapper">
                <i class="dms-wk-icon-warning"></i>
            </div>
            <span class="tr-p2">Caricamento file non riuscito. Riprova tra qualche secondo.</span>
        </div>
        <button type="button" class="close" aria-label="close">
            <i class="dms-wk-icon-close"></i>
        </button>
    </div>

    <!-- toast di errore -->
    <div class="dms-toast dms-toast--error" role="alert" aria-live="assertive" style="display:none">
        <div class="d-flex align-items-center justify-content-start">
            <div class="icon-wrapper">
                <i class="dms-wk-icon-error"></i>
            </div>
            <span>Campi obbligatori non compilati!</span>
        </div>
        <button type="button" class="close" aria-label="close">
            <i class="dms-wk-icon-close"></i>
        </button>
    </div>

</div>

Utilizzo

Le notifiche di tipo toast si rivelano all'utente per 5 secondi e lo avvisano mediante feedback in seguito ad un'azione interna al flusso di navigazione (ad esempio, il salvataggio di alcune modifiche). Tuttavia, l'utente può decidere di chiudere manualmente ciascuna notifica, cliccando sull'icona x

A differenza delle modali, i toast sono considerati veicolatori di messaggi a bassa priorità perciò avvisano l'utente e poi scompaiono in autonomia senza interrompere l'esperienza utente.

Gli avvisi sono disponibili in quattro tipologie, differenziati tra loro attraverso un'iconografia ed un colore prestabilito mediante una specifica classe a seconda della loro funzione:

  • di successo: dms-toast dms-toast--success
  • di attenzione: dms-toast dms-toast--warning
  • di errore: dms-toast dms-toast--error

Per una corretta visualizzazione occorre inserire tutti i toast all'interno di un div con classe dms-toast--wrapper.

Si suggerisce di inserire dei testi efficaci e brevi (al più due righe di testo), poichè leggibili dall'utente in un tempo ridotto.
Lato sviluppo, il componente necessita di una personalizzazione del codice javascript per applicarlo nei vari casi d'uso.

I toast possono essere visualizzati in maniera multipla e non necessariamente per un singolo feedback.

Ai fini dell'accessibilità, si richiede di inserire l'attributo role="alert" per ogni avviso.