Unito.it

Tema Unito v3

Alert

Puoi fornire dei feedback all’utente tramite messaggi di avviso.

Lista semplice solo testo

Gli avvisi sono disponibili in quattro tipologie diverse e per qualsiasi lunghezza di testo.


<div class="alert alert-info" role="alert">
  Questo è un alert di tipo "<b>info</b>".
</div>
<div class="alert alert-success" role="alert">
  Questo è un alert di tipo "<b>success</b>".
</div>
<div class="alert alert-warning" role="alert">
  Questo è un alert di tipo "<b>warning</b>".
</div>
<div class="alert alert-danger" role="alert">
  Questo è un alert di tipo "<b>danger</b>".
</div>

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .sr-only.

Link evidenziato

Usa la classe .alert-link per dare risalto ad un link all’interno dell’alert.


<div class="alert alert-danger" role="alert">
  Questo è un alert con un esempio di <a href="#" class="alert-link">link</a> evidenziato.
</div>

Contenuto aggiuntivo

I messaggi di avviso possono avere del contenuto HTML aggiuntivo come degli heading, paragrafi e divisori.


<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Avviso di successo!</h4>
  <p>Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in modo da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto.</p>
  <hr>
  <p class="mb-0">Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati.</p>
</div>

Chiusura

Utilizzando il plugin JavaScript di alert, è possibile eliminare qualsiasi avviso. Ecco come:

  • Assicurati di aver caricato il plugin di alert o di aver compilato il codice Bootstrap JavaScript.
  • Inserisci il pulsante di chiusura e la classe .alert-dismissible, verrà così aggiunto un ulteriore padding alla destra dell’avviso e posizionerà correttamente il pulsante .close.
  • Sul pulsante di chiusura, aggiungi l’attributo data-bs-dismiss="alert", che attiverà la funzionalità JavaScript. Assicurati di utilizzare l’elemento <button> per un comportamento corretto su tutti i dispositivi.
  • Per animare gli avvisi quando li si elimina, assicurarsi di aggiungere le classi .fade e .show.

Clicca sul bottone di chiusura per vedere la funzionalità di rimozione alert in azione:


<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.
  <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Tramite JavaScript

Abilita la chiusura di un alert tramite JavaScript:


$('.alert').alert()

Oppure con l’assegnazione dell’attributo data in un pulsante all’interno dell’alert, come nell’esempio seguente:


<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Nota che chiudendo un alert lo rimuoverai dal DOM.

Metodi Javascript

Metodo Descrizione
close Chiude un alert rimuovendolo dal DOM. Se le classi .fade e .show sono presenti nell’elemento, l’avviso verrà chiuso con effetto scomparsa.
getInstance Metodo statico che permette far riferimento diretto all'istanza alert associata a un elemento DOM; utilizzabile ad esempio con bootstrap.Alert.getInstance(alert);
dispose L’alert viene rimosso.
getOrCreateInstance Metodo statico che permette far riferimento diretto all'istanza alert associata a un elemento DOM o di crearne uno se assente; utilizzabile ad esempio con bootstrap.Alert.getOrCreateInstance(alert) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Eventi Javascript

Evento Descrizione
close.bs.alert Questo evento si attiva immediatamente quando viene chiamato il metodo di istanza close.
closed.bs.alert Questo evento viene attivato quando l’avviso è stato chiuso (attenderà il completamento delle transizioni CSS). 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})
Torna su