Unito.it

Tema Unito v3

Notifiche

Porta 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.

La Notification appare quando viene attivata dalla seguente funzione Javascript; questa pagina non ne fa uso e le notifiche di esempio in pagina sono simulate

notificationShow('idNotification', 5000);

  • 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.

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.

Si può aggiungere un breve testo al di sotto del titolo utilizzando un tag <p>.

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

Notification standard con testo

Notification con icona, testo e stato

<div class="row">
    <div class="col-12 col-md-6 p-4">
      <p class="mb-4"><strong>Notification standard con testo</strong></p>
      <div class="notification" role="alert" aria-labelledby="not1a-title" id="not1a">
        <h5 id="not1a-title">Titolo notifica</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
      </div>
    </div>
    <div class="col-12 col-md-6 p-4">
      <p class="mb-4"><strong>Notification con icona, testo e stato</strong></p>
      <div class="notification with-icon success" role="alert" aria-labelledby="not2a-title" id="not2a">
        <h5 id="not2a-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Titolo notifica</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
      </div>
    </div>
  </div>

Nofiche 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.

Notifica eliminabile con testo

Notifica eliminabile con icona e testo

<div class="container test-docs">
  <div class="row">
    <div class="col-12 col-md-6 mb-4 mb-md-0">
      <p class="mb-4"><strong>Notifica eliminabile con testo</strong></p>
      <div class="notification dismissable show" role="alert" aria-labelledby="not1dms-title" id="not1dms">
        <h2 id="not1dms-title" class="h5 ">Titolo notifica</h2>
        <button type="button" class="btn notification-close" data-bs-toggle="notification" data-bs-target="#not1dms">
          <svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>
          <span class="visually-hidden">Chiudi notifica: Titolo notifica</span>
        </button>
      </div>
    </div>
    <div class="col-12 col-md-6">
      <p class="mb-4"><strong>Notifica eliminabile con icona e testo</strong></p>
      <div class="notification with-icon success dismissable show" role="alert" aria-labelledby="not2dms-title" id="not2dms">
        <h2 id="not2dms-title" class="h5 "><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Titolo notifica</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
        <button type="button" class="btn notification-close" data-bs-toggle="notification" data-bs-target="#not2dms">
          <svg class="icon"><use href="./dist/svg/sprite.svg#it-close"></use></svg>
          <span class="visually-hidden">Chiudi notifica: Titolo notifica</span>
        </button>
      </div>
    </div>
  </div>
</div>

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"

Torna su