Share
In questo tutorial, impareremo come creare un componente di scheda reattivo con CSS e un po 'di JavaScript. È assolutamente possibile creare componenti di schede CSS pure, ma per questo esempio mettiamo in pratica le nostre competenze JavaScript.
Ecco cosa costruiremo, in pochi e grandi passi:
Nota: Questo tutorial non si concentrerà su come rendere accessibile il componente della scheda, quindi esplorare l'accessibilità sarebbe sicuramente un passaggio successivo valido.
Per cominciare, esaminiamo il markup richiesto. Abbiamo un contenitore che include le schede stesse (voci dell'elenco) e il contenuto di ogni scheda (pannelli delle schede). Per associare una scheda al pannello corrispondente usiamo il dati-index attributo personalizzato che contiene un valore univoco per ciascun pannello di schede. Detto questo, a causa della numerazione basata su Zero, un pannello con indice dei dati = 0 è associato alla prima scheda, un pannello con indice dei dati = 1 è associato al secondo e così via.
Ecco il codice HTML:
Come passo successivo, specifichiamo alcune regole CSS per il nostro componente. Niente di stravagante, solo alcuni stili di base. Una cosa da notare è che non usiamo alcuna transizione (ad esempio dissolvenza, diapositiva) per alternare tra i pannelli di tabulazione; invece questi appaiono e scompaiono con un semplice interruttore on / off.
Ecco gli stili iniziali:
.tabs-container larghezza massima: 1000px; margine: 50px auto; imbottitura: 25px; .tabs display: flex; .tabs li: not (: last-child) margin-right: 7px; .tabs li a display: block; posizione: relativa; top: 4px; imbottitura: 10px 25px; border-radius: 2px 2px 0 0; sfondo: bianco; opacità: 0,7; transizione: tutti gli 0.1s easy-in-out; .tabs li.active a, .tabs li a: hover opacity: 1; inizio: 0; .tabs-content position: relative; z-index: 2; imbottitura: 25px; border-radius: 0 4px 4px 4px; sfondo: bianco; .tabs-panel display: none; .tabs-panel.active display: block;
Con HTML e CSS in atto, è tempo di guardare il codice JavaScript richiesto.
Ogni volta che clicchiamo su una scheda, facciamo le seguenti cose:
Accentsconagua
attivo classe dalla scheda corrispondente (di default la prima) e il pannello delle schede associato (di default il primo).Li padre di questa scheda, aggiungi il attivo class ad esso, e recuperare il suo indice.dati-index attributo) corrisponde al valore dell'indice summenzionato e assegna il valore attivo classe ad esso.Ecco il codice JavaScript risultante:
const tabLinks = document.querySelectorAll (". tabs a"); const tabPanels = document.querySelectorAll (". tabs-panel"); for (lascia el di tabLinks) el.addEventListener ("click", e => e.preventDefault (); document.querySelector ('. tabs li.active'). classList.remove ("active"); document. querySelector ('. tabs-panel.active'). classList.remove ("active"); const parentListItem = el.parentElement; parentList.classList.add ("active"); const index = [... parentListItem.parentElement.children] .indexOf (parentListItem); const panel = [... tabPanels] .filter (el => el.getAttribute ("data-index") == index); panel [0] .classList.add ("active");) ; Il nostro componente è quasi pronto! L'ultima cosa che dobbiamo fare è rendere il componente reattivo. Così, ad esempio, quando il viewport ha una larghezza massima di 600 px, dovrebbe collassare e apparire così:
Poiché stiamo utilizzando un approccio desktop-first, queste sono le regole CSS che dobbiamo sovrascrivere:
@media screen e (max-width: 600px) .tabs flex-direction: column; .tabs li width: 100%; .tabs li: not (: last-child) margin-right: 0; .tabs li a border-radius: 0; opacità: 1; inizio: 0; .tabs li.active a :: before content: '•'; padding-right: 5px; .tabs-content border-radius: 0;
La nostra demo funziona bene su tutti i browser e dispositivi recenti. Come al solito con i miei tutorial, usiamo Babel per compilare il codice ES6 fino a ES5.
In questo breve tutorial, siamo riusciti a creare un utile componente di scheda reattiva con HTML, CSS e JavaScript. Ancora una volta, questo componente non è correttamente accessibile, ma se si desidera migliorare la sua funzionalità, sarebbe un buon passo successivo. Buona programmazione!
