Share
I denne opplæringen lærer vi hvordan du bygger en responsiv fanekomponent med CSS og en liten bit av JavaScript. Det er helt mulig å lage rene CSS-tabkomponenter, men for dette eksempelet la vi sette i bruk våre JavaScript-ferdigheter.
Her er hva vi skal bygge, i noen få store trinn:
Merk: Denne opplæringen vil ikke fokusere på hvordan du gjør kategorien komponent tilgjengelig, så å utforske tilgjengelighet vil sikkert være et gyldig neste trinn.
Til å begynne med, la oss undersøke den nødvendige merkingen. Vi har en container som inneholder kategoriene selv (listeposter), samt innholdet for hver kategori (fanepaneler). For å knytte en fane med det tilsvarende panelet bruker vi data-indeks egendefinert attributt som har en unik verdi for hvert fanepanel. Når det er sagt, på grunn av null-basert nummerering, et panel med data-indeks = 0 er knyttet til den første kategorien, et panel med data-indeks = 1 er forbundet med den andre, og så videre.
Her er HTML-oppslaget:
Som et neste trinn, la oss spesifisere noen CSS-regler for vår komponent. Ingenting for fancy, bare noen grunnleggende stiler. En ting å merke seg er at vi ikke bruker noen overganger (for eksempel fade, lysbilde) for å skifte mellom tavlapanelene; i stedet disse vises og forsvinner med en enkel på / av bryter.
Her er de første stilene:
.tabs-container maksimal bredde: 1000px; margin: 50px auto; polstring: 25px; .tabs display: flex; .tabs li: ikke (: siste barn) margin-right: 7px; .tabs li a display: block; stilling: relativ; topp: 4px; polstring: 10px 25px; border-radius: 2px 2px 0 0; bakgrunn: hvit; opasitet: 0,7; overgang: alle 0.1 s brukervennlige .tabs li.active a, .tabs li a: svever opacity: 1; topp: 0; .tabs-innhold posisjon: relative; z-indeks: 2; polstring: 25px; grense-radius: 0 4px 4px 4px; bakgrunn: hvit; .tabs-panel display: none; .tabs-panel.active display: block;
Med HTML og CSS på plass, er det på tide å se på den nødvendige JavaScript-koden.
Hver gang vi klikker på en fane, gjør vi følgende:
Accentsconagua
aktiv klasse fra den tilhørende kategorien (som standard den første) og tilhørende tabulatorpanel (som standard den første).li Forelder av denne kategorien, legg til aktiv klasse til det, og hente indeksen.data-indeks attributt) samsvarer med ovennevnte indeksverdi og tilordne aktiv klasse til den.Her er den resulterende JavaScript-koden:
const tabLinks = document.querySelectorAll (".faner a"); const tabPanels = document.querySelectorAll ("tabs panel"); for (la el av tabLinks) el.addEventListener ("klikk", e => e.preventDefault (); document.querySelector ('. tabs li.active'). classList.remove ("aktiv"); querySelector ('. tabs-panel.active'). classList.remove ("aktiv"); const parentListItem = el.parentElement; parentList.classList.add ("aktiv"); const index = [... parentListItem.parentElement.children] .indexOf (parentListItem); const panel = [... tabPanels] .filter (el => el.getAttribute ("dataindeks") == indeks); panel [0] .classList.add ("active");) ; Vår komponent er nesten klar! Det siste vi må gjøre er å gjøre komponenten lydhør. Så, for eksempel når visningsporten har en maksimal bredde på 600px, bør den kollapse og se slik ut:
Som vi bruker en desktop-første tilnærming, er disse CSS-reglene som vi må overskrive:
@medias skjerm og (maksimal bredde: 600px) .tabs flex-direction: column; .tabs li bredde: 100%; .tabs li: ikke (: siste barn) margin-right: 0; .tabs li a border-radius: 0; opasitet: 1; topp: 0; .tabs li.active a :: før innhold: '•'; polstring-høyre: 5px; .tabs-innhold border-radius: 0;
Vår demo fungerer bra i alle nyere nettlesere og enheter. Som vanlig med mine opplæringsprogrammer, bruker vi Babel til å kompilere ES6-koden ned til ES5.
I denne korte opplæringen klarte vi å lage en nyttig responsiv fanekomponent med HTML, CSS og JavaScript. Igjen, denne komponenten er ikke riktig tilgjengelig, men hvis du vil forbedre funksjonaliteten, ville det være et godt neste skritt. Glad koding!
