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.

Torna indietro

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 codice

Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione automatica.

Nel caso in cui si desidera importare e inizializzare autonomamente il componente l’attributo data-bs-toggle specifico non deve essere incluso così da evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.

Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.

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

import { HistoryBack } from 'bootstrap-italia';

const backButtonElement = document.getElementById('backButton');
const historyBack = new HistoryBack(backButtonElement, options);

Opzioni

Le opzioni possono essere passate tramite gli attributi data o tramite Javascript. Per quanto riguarda gli attributi data, aggiungi il nome dell’opzione a data-bs, come in data-bs-scroll-limit="".

Nome	Tipo	Predefinito	Descrizione
positionTop	number	0	Posizione Y espressa in pixel alla quale ritornarne al click sull'elemento.
scrollLimit	number	100	Posizione Y espressa in pixel alla quale far comparire l'elemento.
duration	number	800	Durata dell'animazione di scroll espressa in millisecondi.
easing	string	easeInOutSine	Inerzia dell'animazione di scroll. Per i valori fare riferimento alla documentazione di AnimeJs.

Metodi

Metodo	Descrizione
getInstance	Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: HistoryBack.getInstance(domElement).
getOrCreateInstance	Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: HistoryBack.getOrCreateInstance(element).
dispose	Rimuove la funzionalità HistoryBack.
back	Attiva la funzionalità `back` dell'history del browser.