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.
Link
Quando si utilizza un link (tag <a>
) è necessario aggiungere un valore all’attributo href perché il link sia correttamente navigabile via tastiera.
1
<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.
1
2
<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
.
1
2
<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:
1
2
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) |