Hogyan készítsünk egy egyszerű fülsáv navigációs komponenst

A téma a héten # 3 én Heti Coding Challenge navigáció ! Tehát tanuljunk meg egy kicsit többet róla.

Navigáció

A navigációs komponens kulcsfontosságú egy webhelyen, mert azt szeretné, hogy a felhasználók könnyedén navigálhassanak az oldalain. Még egyoldalas webhelyeken is megtalálhatja a navigációs összetevőket, amelyek lehetővé teszik az oldal egy bizonyos szakaszára való ugrást. Fejlesztőként tehát nagyon hasznos tudni, hogyan kell felépíteni ezt a fajta komponenst.

Ebben a cikkben úgy döntöttem, hogy elkészítem a Tab Bar Navigation alkalmazást, de bármilyen navigációt létrehozhat, amelyet csak akar.

Engem ez az Aurelien Salomon által készített terv inspirált. Így fog kinézni a végeredmény annak, amit fel fogunk építeni:

A HTML

A HTML felépítése egyszerű lesz. Van egy .tab-nav-containerés négy .tabmásodpercünk benne:

House

Likes

Search

Profile

Amint láthatja, mindegyiknek .tabvan egy ikonja (a FontAwesome-tól), a hozzá tartozó szöveg és néhány extra osztály, amelyeket az egyes fülek sajátosságainak background-colorés colortulajdonságainak megadásához használnak . Szintén az .activeosztály, amely az aktív fül stílusához használható. Elég alap, igaz? ?

A CSS

Először stílusozzuk a következőket .tab-nav-container:

Megjegyzés : van egy fixedszélességünk a tárolón, mivel nem akarjuk, hogy az aktív megváltoztatásakor megváltoztassa a méretét, .tabmivel az egyes lapok szövege hosszabb vagy rövidebb lehet (pl. Főoldal (4 betű) vagy Profil (6) levelek)).

Az egyenletes flexboxelosztást .taba tartály belsejében végezzük . Ezen kívül úgy gondolom, hogy a CSS eléggé magától értetődő.

Következő ... a .tabstílus:

.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); }

Néhány megjegyzendő dolog itt:

  1. Annak érdekében, hogy a .activelapváltáskor zökkenőmentes legyen az átmenet , transition: backgroundtulajdonságot állítunk be az .tabosztályhoz.
  2. Alapértelmezés szerint a pcímke belsejében a .tabértéke max-widthvan 0, a overflowtulajdonsága pedig hidden. A szöveget ugyanis csak akkor akarjuk megjeleníteni, amikor az .tabaktív.
  3. Mi használ az egyéni szín osztályok ( .purple, .pinkstb), hogy a különböző színek a lapok.

Ügyeljünk arra, hogy a mobilon is jól nézzen ki:

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

Amint láthatja, csökkentjük a .tab-nav-containernézetablak maximális szélességét, 450pxés a párnázást is csökkentjük, hogy kisebb legyen.

A JavaScript

A végén a JS-ben meg kell győződnünk arról, hogy amikor a felhasználó egy másikra kattint, .tabaz .activeosztály hozzáadódik hozzá és eltávolításra kerül az előző aktívból .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'); }); });

Következtetés

Ezt a fajta fülsáv-navigációt leginkább mobileszközökön használják, ezért ha újra szeretné használni mobilalkalmazáshoz, győződjön meg arról, hogy a tárolót a képernyő aljára helyezi (a position: fixed), és újraszámítja a szélességet, hogy kitöltse az egészet. képernyő szélessége.

A Codepen példában a törzs háttérszínét is megváltoztatjuk, amikor egy másik fülre kattintunk. Ez csak vizuális célokra szolgál, és nem pontosan kapcsolódik a hét kódolási témájához. De ha meg akarja nézni, hogyan csináltam, nézze meg a JS kódot a tollban (csak 2 extra kódsor).

További példák erre a Coding Challenge-re

Egy korábbi cikkemben bemutattam, hogyan lehet egy érzékeny navigációs menüt létrehozni. Te is megnézheted, ha valami hasonlót szeretnél felépíteni.

Ha még nem tette meg, mindenképpen olvassa el a Heti kódolási kihívás „szabályait”, ha részt kíván venni a kihívásban! És miért ne tennéd? Ez egy nagyszerű módja a kódolási képességek fejlesztésének! ?

Boldog kódolást! ?

Eredetileg a www.florin-pop.com címen jelent meg.