Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Torna indietro

Torna indietro

Consente agli utenti di avere un link o pulsante con un’azione equivalente al “torna indietro” del browser.

Aggiungendo l’attributo data-bs-toggle="historyback" a qualsiasi link o pulsante è possibile ottenere lo stesso comportamento del tasto “Indietro” del browser: retrocedere di un passo nella cronologia di navigazione.

Quando si utilizza un link (tag <a>) è necessario aggiungere un valore all’attributo href perché il link sia correttamente navigabile via tastiera.

Torna indietro 
<a href="#" class="go-back" data-bs-toggle="historyback"><svg class="icon icon-sm icon-primary me-2"><use href="/dist/svg/sprites.svg#it-arrow-left"></use></svg> Torna indietro</a>

Pulsanti

Nel caso dell’utilizzo di un pulsante l’accorgimento sopraindicato non è necessario.

<button type="button" class="btn btn-primary go-back" data-bs-toggle="historyback"><svg class="icon icon-sm icon-white me-2"><use href="/dist/svg/sprites.svg#it-arrow-left"></use></svg> Torna indietro</button>
<button type="button" class="btn btn-primary go-back" data-bs-toggle="historyback"><svg class="icon icon-sm icon-white me-2"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg> Livello superiore</button>

Pulsanti con sola icona

È possibile creare pulsanti senza testo dotati di sola icona avendo cura di includere il testo alternativo per gli screen reader in un tag <span> con classe .visually-hidden.

<button type="button" class="btn btn-primary go-back" data-bs-toggle="historyback"><svg class="icon icon-sm icon-white"><use href="/dist/svg/sprites.svg#it-arrow-left"></use></svg><span class="visually-hidden">Torna indietro</span></button>
<button type="button" class="btn btn-primary go-back" data-bs-toggle="historyback"><svg class="icon icon-sm icon-white"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg><span class="visually-hidden">Livello superiore</span></button>

Attivazione tramite JavaScript

È possibile creare un’istanza con il constructor, ad esempio:

var backButtonElement = document.getElementById('backButton')
var historyBack = new bootstrap.HistoryBack(backButtonElement)

Metodi

Metodo Descrizione
back Attiva la funzionalità back dell'history del browser
getInstance Metodo statico che restituisce l'istanza HistoryBack associata ad un elemento del DOM. Esempio: bootstrap.HistoryBack.getInstance(element)
getOrCreateInstance Metodo statico che restituisce un'istanza HistoryBack associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.HistoryBack.getOrCreateInstance(element)