Hoe een responsieve tabbladcomponent te bouwen met CSS en een vleugje JavaScript

In deze zelfstudie leren we hoe u een responsieve tabcomponent kunt bouwen met CSS en een beetje JavaScript. Het is absoluut mogelijk om pure CSS-tabcomponenten te maken, maar laten we voor dit voorbeeld onze JavaScript-vaardigheden in de praktijk brengen.

Dit is wat we gaan bouwen, in een paar grote stappen:

Notitie: Deze zelfstudie gaat niet over het toegankelijk maken van het tabbladonderdeel, dus het verkennen van de toegankelijkheid zou zeker een geldige volgende stap zijn.

1. De HTML

Laten we om te beginnen de vereiste markup bekijken. We hebben een container die de tabbladen zelf (lijstitems) bevat, evenals de inhoud voor elk tabblad (tabbladen). Om een tabblad te associëren met het overeenkomstige paneel gebruiken we de data-index aangepast kenmerk dat een unieke waarde heeft voor elk tabbladvenster. Dat gezegd hebbende, vanwege Zero-gebaseerde nummering, een paneel met data-index = 0 is gekoppeld aan het eerste tabblad, een paneel met data-index = 1 wordt geassocieerd met de tweede, enzovoort.

Dit is de HTML-opmaak:

   Deel 1 
  Deel 2 
  Deel 3

2. De CSS

Laten we als volgende stap enkele CSS-regels voor onze component specificeren. Niets bijzonders, slechts enkele basisstijlen. Een ding om op te merken is dat we geen overgangen gebruiken (bijvoorbeeld vervagen, dia's) om te schakelen tussen de tabbladen; in plaats daarvan verschijnen en verdwijnen deze met een eenvoudige aan / uit-schakelaar.

Dit zijn de beginstijlen:

.tabs-container max-width: 1000px; marge: 50px auto; opvulling: 25px;  .tabs weergave: flex;  .tabs li: not (: last-child) margin-right: 7px;  .tabs li a display: block; positie: relatief; top: 4px; opvulling: 10px 25px; grensradius: 2px 2px 0 0; achtergrond: wit; opaciteit: 0,7; overgang: alle 0,1s gemak in-uit;  .tabs li.active a, .tabs li a: hover opacity: 1; boven: 0;  .tabs-content position: relative; z-index: 2; opvulling: 25px; grensradius: 0 4px 4px 4px; achtergrond: wit;  .tabs-panel display: geen;  .tabs-panel.active display: block;

3. Het JavaScript

Met de HTML en CSS op zijn plaats is het tijd om naar de vereiste JavaScript-code te kijken.

Elke keer dat we op een tabblad klikken, doen we de volgende dingen:

Verwijder de actief klasse op het bijbehorende tabblad (standaard de eerste) en het bijbehorende tabblad (standaard de eerste).

Vind de li ouder van dit tabblad, voeg de actief klasse en haalt de index op.

Zoek het tabbladvenster waarvan de kenmerkwaarde (voor de data-index attribuut) komt overeen met de bovengenoemde indexwaarde en wijst de waarde toe actief klasse eraan.

Hier is de resulterende JavaScript-code:

const tabLinks = document.querySelectorAll (". tabs a"); const tabPanels = document.querySelectorAll (". tabs-panel"); for (laat el van tabLinks) el.addEventListener ("klik", 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 paneel = [... tabPanels] .filter (el => el.getAttribute ("data-index") == index); paneel [0] .classList.add ("active");) ;

4. Responsief gaan

Ons onderdeel is bijna klaar! Het laatste wat we moeten doen, is het onderdeel responsief maken. Als het kijkvenster bijvoorbeeld een maximale breedte van 600 pixels heeft, zou het moeten samenvouwen en er als volgt uitzien:

Aangezien we een desktop-first benadering gebruiken, zijn dit de CSS-regels die we moeten overschrijven:

@media-scherm en (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; dekking: 1; boven: 0;  .tabs li.active a :: before content: '•'; opvulling rechts: 5px;  .tabs-content border-radius: 0;

5. Browserondersteuning

Onze demo werkt goed in alle recente browsers en apparaten. Zoals gebruikelijk bij mijn zelfstudies, gebruiken we Babel om de ES6-code te compileren tot ES5.

Conclusie

In deze korte tutorial zijn we erin geslaagd een bruikbare responsieve tabbladcomponent te maken met HTML, CSS en JavaScript. Nogmaals, dit onderdeel is niet goed toegankelijk, maar als u de functionaliteit ervan wilt verbeteren, zou dat een goede volgende stap zijn. Happy codering!

Web ontwerp