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.

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

Notifica 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>Notifica 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 eliminabili

Le Notification eliminabili (o 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>

Posizionamento

Il posizionamento di default della notifica è in basso a destra.
Opzionalmente, è possibile definire il posizionamento della notifica utilizzando una fra le classi aggiuntive .top-fix, .bottom-fix, .left-fix o .right-fix che posizionano la notifica, rispettivamente, in alto, in basso, a sinistra o a destra dello schermo.

<div class="container test-desktop">
    <div class="notification top-fix with-icon success" role="alert" aria-labelledby="not1e-title" id="not1e">
        <h2 id="not1e-title" class="h5 no_toc"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Top fix</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
    </div>
    <div class="notification bottom-fix with-icon success" role="alert" aria-labelledby="not2e-title" id="not2e">
        <h2 id="not2e-title" class="h5 no_toc"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Bottom fix</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
    </div>
    <div class="notification left-fix with-icon success" role="alert" aria-labelledby="not3e-title" id="not3e">
        <h2 id="not3e-title" class="h5 no_toc"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Left fix</h2>
        </div>
    <div class="notification right-fix with-icon success" role="alert" aria-labelledby="not4e-title" id="not4e">
        <h2 id="not4e-title" class="h5 no_toc"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>Right fix</h2>
    </div>
</div>

Implementazione

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.

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

<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 riga di JavaScript.
Durante la creazione di un’istanza Notification è possibile passare un oggetto per la configurazione (opzionale).

const myNotification = new bootstrap.Notification(document.getElementById('myNotification'), {
  timeout: 2000,
})
opzionedescrizione
timeoutdurata di permanenza della notifica in millisecondi. Sostituisce l'attributo data-bs-timeout.
Metodi javascript
metododescrizionenote
showMostra manualmente una notificaÈ possibile passare come parametro il valore in millisecondi di permanenza della notifica. Se specificato, il tempo di permanenza verrà ricavato dal parametro di configurazione timeout o dal data attribute data-bs-timeout; ad esempio myNotification.show(2000) visualizza una notifica per 2 secondi
hideNasconde manualmente una notifica
toggleMostra/Nasconde manualmente una notifica

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