Kuinka rakentaa yksinkertainen välilehden palkin navigointikomponentti

Teema viikon # 3 minun Weekly Coding Challenge navigointi ! Joten oppitaan siitä hieman enemmän.

Navigointi

Navigointikomponentti on ratkaiseva verkkosivustolla, koska haluat, että käyttäjät pystyvät helposti selaamaan sivuillasi. Löydät navigointikomponentin jopa yhden sivun verkkosivustoilta, joiden avulla voit siirtyä tiettyyn sivun osioon. Joten kehittäjänä on erittäin hyödyllistä tietää, miten tällainen komponentti rakennetaan.

Tässä artikkelissa päätin rakentaa välilehtipalkin navigoinnin, mutta voit rakentaa minkä tahansa haluamasi navigoinnin.

Minua inspiroi tämä Aurelien Salomonin tekemä muotoilu. Tässä tulee näyttämään rakennettavan lopputulos:

HTML

HTML-rakenne tulee olemaan yksinkertainen. Meillä on siinä .tab-nav-containerneljä ja neljä .tabs:

House

Likes

Search

Profile

Kuten näette, jokaisella .tabon kuvake (FontAwesomelta), vastaava teksti ja joitain ylimääräisiä luokkia, joita käytetään antamaan jokaiselle välilehdelle erityiset background-colorja colorominaisuudet. Myös .activeluokka, jota käytetään aktiivisen välilehden muotoiluun. Melko perus, eikö? ?

CSS

Ensinnäkin, muotoillaan .tab-nav-container:

Huomaa : Säiliössä on fixedleveys, koska emme halua sen muuttavan kokoa, kun vaihdamme aktiivista, .tabkoska jokaisella välilehdellä voi olla joko pidempi tai lyhyempi teksti (esim. Koti (4 kirjainta) vs Profiili (6) kirjaimet)).

Käytämme flexboxjakamaan .tabs tasaisesti säiliön sisällä. Muuten uskon, että CSS on melko itsestään selvä.

Seuraava ... .tabmuotoilu:

.tab { background-color: #ffffff; border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 20px; margin: 0 10px; transition: background 0.4s linear; } .tab i { font-size: 1.2em; } .tab p { font-weight: bold; overflow: hidden; max-width: 0; } .tab.active p { margin-left: 10px; max-width: 200px; transition: max-width 0.4s linear; } .tab.active.purple { background-color: rgba(91, 55, 183, 0.2); color: rgba(91, 55, 183, 1); } .tab.active.pink { background-color: rgba(201, 55, 157, 0.2); color: rgba(201, 55, 157, 1); } .tab.active.yellow { background-color: rgba(230, 169, 25, 0.2); color: rgba(230, 169, 25, 1); } .tab.active.teal { background-color: rgba(28, 150, 162, 0.2); color: rgba(28, 150, 162, 1); }

Muutamia huomioitavia asioita tässä:

  1. Jotta olla joustava siirtyminen, kun muutamme .activevälilehti, olemme asettaa transition: backgroundkohde .tabluokkaan.
  2. Oletuksena ptunnisteen sisällä .tabon max-widthsekä 0ja sen overflowomaisuuden asetettu hidden. Tämä johtuu siitä, että haluamme näyttää tekstin vain, kun se .tabon aktiivinen.
  3. Käytämme oma väri luokat ( .purple, .pinkjne) ja on eri värejä välilehdet.

Varmista, että se näyttää hyvältä myös mobiililaitteilla:

@media (max-width: 450px) { .tab-nav-container { padding: 20px; width: 350px; } .tab { padding: 0 10px; margin: 0; } .tab i { font-size: 1em; } }

Kuten näette, kutistumme, .tab-nav-containerkun näkymän enimmäisleveys on, 450pxja pienennämme myös pehmustetta, jotta se näyttää pienemmältä.

JavaScript

Lopuksi JS: ssä on varmistettava, että kun käyttäjä napsauttaa toista .tab, .activeluokka lisätään siihen ja poistetaan edellisestä aktiivisesta .tab:

// Get all the tabs const tabs = document.querySelectorAll('.tab'); tabs.forEach(clickedTab => { // Add onClick event listener on each tab clickedTab.addEventListener('click', () => { // Remove the active class from all the tabs (this acts as a "hard" reset) tabs.forEach(tab => { tab.classList.remove('active'); }); // Add the active class on the clicked tab clickedTab.classList.add('active'); }); });

Johtopäätös

Tällaista välilehden palkinavigointia käytetään enimmäkseen mobiililaitteissa, joten jos haluat käyttää sitä uudelleen mobiilisovelluksessa, varmista, että sijoitat säiliön näytön alareunaan (kanssa position: fixed) ja lasket leveyden uudelleen täyttääksesi koko näytön leveys.

Codepen-esimerkissä muutamme myös rungon taustaväriä, kun toista välilehteä napsautetaan. Tämä on vain visuaalisia tarkoituksia varten, eikä se liity tarkalleen tämän viikon koodausteemaan. Mutta jos haluat nähdä, kuinka tein sen, tarkista JS-koodi kynässä (vain 2 ylimääräistä koodiriviä).

Lisää esimerkkejä tästä koodaushaasteesta

Edellisessä artikkelissa osoitin, kuinka rakentaa reagoiva navigointivalikko. Voit tarkistaa sen myös, jos haluat rakentaa jotain sellaista.

Ja jos et ole, muista lukea Weekly Coding Challenge -säännöt, jos haluat osallistua Challengeen! Ja miksi et? Se on hieno tapa parantaa koodaustaitojasi! ?

Hyvää koodausta! ?

Alun perin julkaistu osoitteessa www.florin-pop.com.