Share
În acest tutorial, vom învăța cum să construim o componentă de filă responsabilă cu CSS și un pic de JavaScript. Este absolut posibil să se creeze componente ale fișei pure CSS, dar pentru acest exemplu, să punem în practică abilitățile JavaScript.
Iată ce vom construi, în câțiva pași mari:
Notă: Acest tutorial nu se va concentra asupra modului de a face accesibil componenta tab, astfel încât explorarea accesibilității ar fi cu siguranță un pas valabil.
În primul rând, să examinăm marcajul necesar. Avem un container care conține filele în sine (elementele listei), precum și conținutul fiecărei file (tab-uri). Pentru a asocia o filă cu panoul corespunzător utilizăm date index atribut personalizat care deține o valoare unică pentru fiecare panou tab. Acestea fiind spuse, datorită numerotării bazate pe zero, un panou cu indexul de date = 0 este asociat cu prima filă, cu un panou cu index-ul datelor = 1 este asociat cu al doilea și așa mai departe.
Iată marca HTML:
Ca o etapă următoare, să specificăm câteva reguli CSS pentru componenta noastră. Nimic prea fantezist, doar câteva stiluri de bază. Un lucru de reținut este că nu folosim tranziții (de ex., Decolorare, alunecare) pentru a comuta între panourile filelor; în loc de acestea apar și dispar cu un simplu comutator on / off.
Iată stilurile inițiale:
.file-container max-width: 1000px; margine: 50 pixeli automat; padding: 25px; .tabs display: flex; .tabs li: nu (: ultimul-copil) margin-right: 7px; .tabs li a display: bloc; poziție: relativă; top: 4px; padding: 10px 25px; raza de graniță: 2px 2px 0 0; fundal: alb; opacitate: 0,7; tranziție: toate cu ușurință în afară; .tabs li.activă a, .tabs li a: hover opacitate: 1; top: 0; .tabs-content poziție: relativă; z-index: 2; padding: 25px; raza de graniță: 0 4px 4px 4px; fundal: alb; .tabs-panel display: none; .tabs-panel.active afișare: bloc;
Cu HTML și CSS în loc, este timpul să se uite la codul JavaScript necesar.
De fiecare dată când facem clic pe o filă, facem următoarele lucruri:
Accentsconagua
activ din tab-ul corespunzător (implicit primul) și panoul asociat tab-ului (implicit primul).Li părinte din această filă, adăugați activ clasa la ea, și să-și recupereze indexul.date index atribut) se potrivește cu valoarea indicelui menționat anterior și se atribuie activ clasa la ea.Iată codul JavaScript rezultat:
const tabLinks = document.querySelectorAll ("tab-uri a"); const tabPanels = document.querySelectorAll ("tab-panoul"); pentru (el el al tabLinks) el.addEventListener ("click", e => e.preventDefault (); document.querySelector ('.tabs li.active') classList.remove ("activ"); ("active"); const = index.html ("active"); queryListItem = .indexOf (parentListItem); const pan = [... tabPanels] .filter (el => el.getAttribute ("date-index") == index); ; Componenta noastră este aproape gata! Ultimul lucru pe care trebuie să-l facem este să facem componenta responsabilă. De exemplu, atunci când fereastra de vizualizare are o lățime maximă de 600px, ar trebui să se prăbușească și să arate astfel:
Pe măsură ce folosim o abordare de tip desktop-first, acestea sunt regulile CSS pe care trebuie să le suprascriem:
Ecran @media și (max-width: 600px) .tabs flex-direction: column; .tabs li lățime: 100%; .tabs li: nu (: ultimul-copil) margin-right: 0; .tabs li a limita-rază: 0; opacitate: 1; top: 0; .tabs li.active a :: înainte de conținut: '•'; padding-right: 5px; .tabs-content border-radius: 0;
Demo-ul nostru funcționează bine în toate browserele și dispozitivele recente. Ca de obicei, cu tutorialele mele, folosim Babel pentru a compila codul ES6 până la ES5.
În acest tutorial scurt, am reușit să creăm o componentă utilă de filme cu HTML, CSS și JavaScript. Din nou, această componentă nu este accesibilă în mod corespunzător, dar dacă doriți să îmbunătățiți funcționalitatea acesteia, acesta ar fi un bun pas înainte. Codificare fericită!
