Barra dei passaggi per il sito (stepper in HTML e CSS)

Barra dei passaggi per il sito (stepper in HTML e CSS): a cosa serve

Genera la barra che mostra a che punto è la persona: carrello, consegna, pagamento e conferma; dati, indirizzo e riepilogo; ordine ricevuto, in preparazione e in arrivo. Scrivi un passaggio per riga, scegli quello attuale, la direzione e i colori. I passaggi completati ricevono una spunta e la linea tra di essi segue l’avanzamento.

Il codice usa una lista ordinata, con aria-current="step" sul passaggio attuale e un avviso nascosto di completato per gli screen reader. In orizzontale, sugli schermi stretti, la barra mostra solo i numeri e il nome del passaggio attuale. Include anche una funzione irPara(n) per cambiare passaggio con JavaScript.

Come si usa

1. Scrivi i passaggi, uno per riga.
2. Scegli il passaggio attuale, la direzione e i colori.
3. Copia il codice o scarica l’HTML.

Quando usarlo

• Checkout del negozio online.
• Modulo di registrazione in più parti.
• Tracciamento ordine.

Domande frequenti

La barra dei passaggi è accessibile?

Sì. È una lista ordinata (ol), quindi lo screen reader annuncia il numero di passaggi e la posizione di ciascuno. Il passaggio attuale ha aria-current="step", e quelli completati hanno un testo nascosto che dice completato.

Funziona sul cellulare?

In modalità orizzontale, sugli schermi stretti la barra mostra solo i numeri e il nome del passaggio attuale, per non stringere il testo. La modalità verticale funziona allo stesso modo su qualsiasi schermo ed è ideale per tracciare gli ordini.

Come cambiare il passaggio attuale con JavaScript?

Cambia le classi: i passaggi precedenti restano con feito, quello attuale con atual e aria-current="step", e i successivi restano senza classe. Il codice generato include una funzione irPara(n) che lo fa.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili