Alert

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

Esempi

Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsiasi lunghezza di testo. Inoltre possono prevedere un pulsante di chiusura utilizzando un pulsante con attributo data-bs-dismiss="alert".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="alert alert-primary" role="alert">
  Questo è un alert di tipo "<b>primary</b>".
</div>

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

Link evidenziato

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

1
2
3
<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 intestazioni, paragrafi e divisori.

1
2
3
4
5
6
<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ù 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

È possibile eliminare qualsiasi avviso mediante un pulsante di chiusura:

• 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 .btn-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 pulsante di chiusura per vedere la funzionalità di rimozione alert in azione:

1
2
3
4
5
6
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Chiudi avviso">
    <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
  </button>
</div>

Attivazione tramite codice

Abilita la chiusura di un alert tramite JavaScript:

1
2
3
4
5
6
import { Alert } from 'bootstrap-italia';

const alertList = document.querySelectorAll('.alert');
alertList.forEach((alert) => {
  new Alert(alert);
})

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

1
2
3
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Chiudi avviso">
  <span aria-hidden="true">&times;</span>
</button>

Nota che chiudendo un alert lo rimuoverai dal DOM.

Metodi

1
2
3
4
5
6
7
import { Alert } from 'bootstrap-italia';

const alertNode = document.querySelector('#myAlert')
const alert = new Alert(alertNode)
setTimeout(() => {
  alert.close()
}, 15000);

Eventi

Il plugin alert di Bootstrap mette a disposizione alcuni eventi per agganciare la funzionalità di avviso.

1
2
3
4
5
6
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', () => {
  // fai qualcosa, ad esempio, sposta esplicitamente il focus sull'elemento più appropriato,
  // in modo che non venga perso/resettato all'inizio della pagina
  // document.getElementById('...').focus()
})