Naršymo juostos kūrimas „React“ – „SitePoint“.

Šiame straipsnyje bus parodyta, kaip galite sukurti naršymo juostą („navbar“) programoje „React“, apžvelgdami viską nuo dizaino sumetimų iki įgyvendinimo ir pritaikymo neįgaliesiems geriausios praktikos.

Viena iš esminių bet kurios žiniatinklio programos dalių yra naršymo juosta, nes ji leidžia vartotojams naršyti skirtinguose svetainės puslapiuose ir skyriuose.

Taigi svarbu sukurti naršymo juostą su reikiamomis nuorodomis ir tinkamomis pritaikymo neįgaliesiems priemonėmis, kad naudotojai galėtų rasti kelią jūsų programoje.

Key Takeaways

• Naršymo juosta yra esminis bet kurios svetainės elementas, nes ji suteikia vartotojams galimybę naršyti skirtinguose puslapiuose ir skyriuose.
• „React“ leidžia kurti daugkartinio naudojimo ir modulinius komponentus, todėl tai puikus pasirinkimas kuriant sudėtingas vartotojo sąsajas, pvz., naršymo juostas.
• Prieinamumas turėtų būti svarbiausias prioritetas kuriant naršymo juostą, kad visi vartotojai, įskaitant neįgaliuosius, galėtų efektyviai naršyti jūsų svetainėje.

Kas yra Navbar?

Naršymo juosta yra vartotojo sąsajos elementas, kuris paprastai rodomas tinklalapio viršuje arba šone.

Jis naudojamas kaip navigacijos priemonė, teikianti nuorodas arba mygtukus, leidžiančius vartotojams pasiekti skirtingas svetainės skiltis ar puslapius.

Tai būtina norint sukurti sklandžią ir intuityvią naudotojo patirtį, nes ji padeda vartotojams suprasti svetainės struktūrą ir hierarchiją ir leidžia be vargo pereiti tarp skirtingų programos dalių.

Štai keli gerai suprojektuotų naršymo juostų pavyzdžiai:

Airbnb. „Airbnb“ naršymo juosta yra švaraus ir minimalistinio dizaino, su aiškiomis nuorodomis į įvairias svetainės skiltis, tokias kaip „Vietos, kuriose galima apsistoti“, „Patirtys“ ir „Internetinė patirtis“.

Dropbox. „Dropbox“ naršymo juosta yra paprasta, bet efektyvi, joje yra ryškus išskleidžiamasis meniu „Produktai“, leidžiantis vartotojams tyrinėti įvairius pasiūlymus.

Navigacijos juostos kūrimas „React“.

Dabar, kai suprantame naršymo juostų svarbą, pasinerkime į jų kūrimo procesą naudojant React.

Šiame pavyzdyje sukursime naršymo juostą el. prekybos svetainei pavadinimu „ShopNow“.

1 veiksmas: naršymo juostos projektavimas

Prieš pradedant kodavimą, būtina turėti omenyje aiškų naršymo juostos dizainą.

Savo ShopNow svetainėje sieksime paprasto, bet šiuolaikiško dizaino su šiais elementais:

• logotipas kairėje pusėje
• nuorodos į skirtingas svetainės skiltis (pvz., „Produktai“, „Apie mus“ ir „Kontaktai“)
• krepšelio piktograma su ženkleliu, rodančiu prekių krepšelyje skaičių
• su paskyra susijusių veiksmų naudotojo piktograma (pvz., „Prisijungti“ ir „Mano paskyra“)

Štai pavyzdys, kaip gali atrodyti mūsų naršymo juosta.

2 veiksmas: „React“ projekto nustatymas

Prieš pradėdami kurti naršymo juostą, turėsime sukurti naują React projektą. Galite sukurti naują React projektą naudodami Sukurkite programą „React“. paleisdami šią komandą savo terminale:

npx create-react-app shopnow

Kai projektas bus nustatytas, eikite į projekto katalogą ir paleiskite kūrimo serverį:

cd shopnow
npm start

3 veiksmas: naršymo juostos komponento kūrimas

Su SPA sistemoms, tokioms kaip „React“, svarbu kurti ir galvoti apie pakartotinai naudojamus nepriklausomus komponentus. Taigi labai svarbu sukurti komponentus, kuriuos galėtumėte pakartotinai naudoti visoje programoje.

Viena daugkartinio naudojimo komponento programa yra naršymo juosta. Galite sukurti daugkartinio naudojimo naršymo juostos komponentą, kurį galėsite pakartotinai naudoti programoje.

Sukurkime naują failą pavadinimu Navbar.js viduje src katalogą ir pridėkite šį kodą:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (

<nav className="navbar">
  {}
</nav>
);
};

export default Navbar;

Sukūrėme funkcinį komponentą, vadinamą Navbar kad grąžina a <nav> elementas su klasės pavadinimu navbar. Taip pat sukursime naują failą pavadinimu Navbar.css tame pačiame kataloge, kad sukurtumėte naršymo juostą.

4 veiksmas: naršymo juostos struktūros pridėjimas

Dabar pridėkime naršymo juostos struktūrą Navbar komponentas:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (

<nav className="navbar">
  <div className="navbar-left">
    <a href="/" className="logo">
      ShopNow
    </a>
  </div>
  <div className="navbar-center">
    <ul className="nav-links">
      <li>
        <a href="/products">Products</a>
      </li>
      <li>
        <a href="/about">About Us</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>
  </div>
  <div className="navbar-right">
    <a href="/cart" className="cart-icon">
      <i className="fas fa-shopping-cart"></i>
      <span className="cart-count">0</span>
    </a>
    <a href="/account" className="user-icon">
      <i className="fas fa-user"></i>
    </a>
  </div>
</nav>
);
};

export default Navbar;

Šiame kode naršymo juostą padalijome į tris dalis:

1. navbar-left. Jame yra logotipas, kuris yra nuoroda į pagrindinį puslapį.
2. navbar-center. Čia yra netvarkingas sąrašas (<ul>) naršymo nuorodų.
3. navbar-right. Jame yra krepšelio piktograma su ženkleliu, rodančiu prekių krepšelyje skaičių, ir naudotojo piktograma, skirta su paskyra susijusiems veiksmams.

Mes taip pat naudojome „Font Awesome“ piktogramas krepšeliui ir naudotojo piktogramoms, kurias turėsite įtraukti į savo projektą iki vadovaudamiesi jų svetainėje pateiktomis instrukcijomis.

5 veiksmas: naršymo juostos stiliaus nustatymas

Dabar, kai jau turime struktūrą, pridėkime keletą stilių, kad naršymo juosta atrodytų patrauklesnė. Atidaryk Navbar.css failą ir pridėkite šiuos stilius:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

6 veiksmas: naršymo juostos importavimas ir atvaizdavimas

Galiausiai turime importuoti Navbar komponentas ir pateikti jį mūsų App.js failas:

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
<div>
  <Navbar /v>
  {}
</div>
);
}

export default App;

Dabar, kai paleisite programą „React“, puslapio viršuje turėtumėte pamatyti naršymo juostą, kaip parodyta paveikslėlyje šis rašiklis.

Spustelėkite 0,5x mygtuką viršuje esančiame rašikliu, kad pamatytumėte naršymo juostos darbalaukio išdėstymą.

7 veiksmas: geriausia praktika: prieinamumo gerinimas

Prieinamos naršymo juostos kūrimas yra labai svarbus siekiant užtikrinti, kad visi vartotojai galėtų efektyviai naršyti jūsų svetainėje.

Štai keletas geriausių praktikų, kurių reikia laikytis.

• Naudokite semantinį HTML. Savo naršymo juostos kode jau naudojome semantinius HTML elementus. Pagrindinis navigacijos skyrius yra suvyniotas į a <nav> elementas, nuorodų sąrašas yra netvarkingame sąraše (<ul>) su kiekviena nuoroda kaip sąrašo elementu (<li>), o pačias nuorodas vaizduoja <a> elementai.

• Pridėkite ARIA vaidmenis ir atributus. Galime pridėti role="navigation" priskirti prie <nav> elementas, nurodantis, kad tai naršymo skyrius:

  <nav className="navbar" role="navigation">
       {}
  </nav>

• Užtikrinkite prieigą prie klaviatūros. >React suteikia integruotą klaviatūros pasiekiamumo palaikymą. Pagal numatytuosius nustatymus visi interaktyvūs elementai (pvz., nuorodos ir mygtukai) gali būti sufokusuoti naudojant skirtuką klavišą ir suaktyvinkite naudodami Įeikite arba Erdvė raktai. Tačiau turėtume išbandyti šią funkciją, kad įsitikintume, jog ji veikia taip, kaip tikimasi mūsų naršymo juostoje.

• Pateikite aiškius fokusavimo stilius. Norėdami pateikti aiškius fokusavimo stilius, galime pridėti CSS taisyklių :focus mūsų nuorodų ir piktogramų būsena. Pateikiame pavyzdį, kaip galime sukurti nukreiptų nuorodų stilių mūsų naršymo juostoje:

  .navbar-center .nav-links a:hover {
    color: red;
  }
  

  Galite reguliuoti outline ir outline-offset savybes, kad būtų pasiektas norimas fokusavimo stilius.

• Naudokite aprašomąjį nuorodos tekstą. Naršymo juostos kode jau naudojome aprašomąjį nuorodos tekstą naršymo nuorodoms („Produktai“, „Apie mus“, „Kontaktai“). Tačiau turėtume užtikrinti, kad krepšelio ir naudotojo piktogramų nuorodos tekstas taip pat būtų aprašomasis. Vienas iš būdų tai pasiekti yra pridėti vizualiai paslėptą tekstą naudojant aria-label atributas:

    <a href="/cart" className="cart-icon" aria-label="Shopping Cart">
       <i className="fas fa-shopping-cart"></i>
       <span className="cart-count">0</span>
    </a>
    <a href="/account" className="user-icon" aria-label="User Account">
       <i className="fas fa-user"></i>
    </a>

• Padarykite išdėstymą jautrų. Kad naršymo juosta būtų jautri, galime naudoti CSS medijos užklausas, kad pritaikytume išdėstymą ir stilius pagal ekrano dydį. Pavyzdžiui, mažesniuose ekranuose galime paslėpti naršymo nuorodas ir pakeisti jas mėsainių meniu:

  @media (max-width: 768px) {
       .navbar-center .nav-links {
         display: none;
       }
  
       .navbar-right {
         display: flex;
         align-items: center;
       }
  
       .navbar-right .hamburger-menu {
         display: block;
         color: #fff;
         font-size: 1.5rem;
         cursor: pointer;
       }
     }

  „JavaScript“ kode turėtume tvarkyti naršymo nuorodų perjungimą, kai spustelėjamas mėsainių meniu.

Įdiegę šią geriausią pritaikymo neįgaliesiems praktiką, galime užtikrinti, kad mūsų naršymo juosta būtų tinkama naudoti ir įtraukta visiems naudotojams, įskaitant neįgaliuosius. Nepamirškite išbandyti programos naudodami įvairius ekrano skaitytuvus, klaviatūros navigaciją ir kitas pagalbines technologijas, kad įsitikintumėte, jog ji atitinka pritaikymo neįgaliesiems standartus.

Apvyniojimas

Štai ir viskas! Dabar turite naršymo juostą, kurią galite pakartotinai naudoti programoje, kuri užtikrina, kad naudotojai galėtų rasti kelią programoje.

Norėdami patikrinti visą kodą, peržiūrėkite CodePen demonstracinė versija.

Dažnai užduodami klausimai (DUK)