Lekce 12. - Implementace menu v React

V naší aplikaci todos chceme po kliknutí na tlačítko nabídky přepnout navigaci na postranním panelu. A pokud si pamatujete, zmínili jsme se dříve v seriálu, že jedním z důvodů, proč deklarujeme stav v komponentě, je to, zda bude zpracovávat přepínání.

Pojďme tedy přejít na soubor Navbar.js a importovat hook useState.

import React, { useState } from "react"

Poté přidejte do funkční komponenty:

const [navbarOpen, setNavbarOpen] = useState(false)

V kódu jsme nastavili počáteční stav na false. Ve výchozím nastavení chceme skrýt navigaci na postranním panelu. Poté, když kliknete na tlačítko nabídky, můžeme zavolat funkci aktualizace setNavbarOpen, abychom aktualizovali stav.

Dále musíme vytvořit tlačítko pro tento přepínač. A potom tomu předáme stav.

Přidejte prvek button dovnitř prvku nav (ale nad < ul >):

return (
  <nav className="navBar">
    <button>{navbarOpen ? "Close" : "Open"}</button>
    <ul>...</ul>
  </nav>
)

Mezitím dynamicky zobrazujeme text tlačítka na základě hodnoty stavové proměnné.

Pokud je hodnota true, zobrazíme „Zavřít“, jinak zobrazíme „Otevřít“.

Prozatím je výchozí hodnota false. Uvidíte tedy pouze tlačítko s textem „Otevřít“. Později v této části nahradíme text ikonou.

Uložte soubor a podívejte se na tlačítko zobrazené v rozhraní.

Dále musíme aktualizovat stav, abychom mohli přepínat text tlačítka. Už víte, jak na to. Ano, použijeme funkci aktualizátoru. Ale nejdříve přidáme obslužnou rutinu události do tlačítka, které spustí funkci aktualizátoru.

Aktualizujte prvek button, abyste měli:

<button onClick={handleToggle}>{navbarOpen ? "Close" : "Open"}</button>

Poté přidejte tento popisovač nad příkaz return:

const handleToggle = () => {
  setNavbarOpen(prev => !prev)
}

Uložte soubor a otestujte svou práci. Uvidíte, že se text tlačítka mění, jak na něj kliknete.

V kódu aktualizujeme stav pomocí funkce aktualizátoru. Můžete to však udělat jednodušeji:

const handleToggle = () => {
  setNavbarOpen(!navbarOpen)
}

Bude to fungovat.

Neměli bychom však tento přístup používat, pokud stav závisí na předchozím. Nezapomeňte, že přepínáme text tlačítka. A to záleží na booleovské hodnotě stavové proměnné ( true nebo false).

Pojďme nyní využít stavovou proměnnou k dynamickému přidání názvu třídy k prvku bočního panelu.

Stále v souboru Navbar.js aktualizujte < ul > tak, aby obsahovala název třídy:

<ul className={`menuNav ${navbarOpen ? " showMenu" : ""}`}>...</ul>

Kód je samozřejmý. Jednoduše přidáváme třídu showMenu k ul, pokud je stavová proměnná true v navbarOpen. Když je false, třídu odstraníme.

Uložte soubor.

Přejděte na frontend a zkontrolujte prvek ul. Pokud nyní kliknete na tlačítko nabídky, přepne se název třídy showMenu.

Přidejme styly k zachycení této události.

Přejděte do souboru App.css a do dolní části přidejte následující styly:

/* sidebar Nav */

.navBar {
  position: relative;
}

.navBar button {
  position: fixed;
  left: 40px;
  top: 40px;
  z-index: 10;
  cursor: pointer;
}

.menuNav {
  overflow-y: scroll;
  list-style: none;
  position: fixed;
  top: 0;
  background: darkcyan;
  left: 0;
  bottom: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  max-width: 290px;
  z-index: 9;
}

.menuNav.showMenu {
  width: 100%;
}

a {
  display: block;
  padding: 10px 40px;
  text-decoration: none;
  color: #3fffd2;
  text-transform: uppercase;
  font-weight: bold;
}

.menuNav li:first-child {
  margin-top: 7rem;
}

Uložte soubor a podívejte se na své styly použité v rozhraní frontend.

Zavření postranního panelu po kliknutí na odkaz nav

Pokud v tuto chvíli kliknete na odkaz a přejdete na jinou stránku, stránka se vykreslí, ale postranní panel zůstane otevřený. Můžete jej zavřít pouze kliknutím na tlačítko nabídky nebo znovu načíst stránku.

Oprava je velmi jednoduchá!

Do odkazů nav přidáme událost onClick. Jeho jedinou úlohou je nastavit stavovou proměnnou na false. Jakmile tedy kliknete na navigační odkazy, stav se vrátí zpět na výchozí hodnotu, tj. false.

Aktualizujte komponentu NavLink, abyste měli:

<NavLink
  to={link.path}
  activeClassName="active-link"
  onClick={() => closeMenu()}
  exact
>
  {link.text}
</NavLink>

Pak přidejte funkci closeMenu nad příkaz return:

const closeMenu = () => {
  setNavbarOpen(false)
}

Uložte soubor a otestujte aplikaci. Nyní by to mělo fungovat podle očekávání.

Jak používat ikony SVG v React

I když existuje řada bezplatných knihoven ikon, ze kterých si můžete vybrat, zde budeme používat knihovnu ikon přímo z Reactu.

Jedná se o malou knihovnu, která vám umožňuje přidávat ikony z různých populárních sad ikon (včetně písem Font Awesome, Ionicons, ikon Bootstrap, Feather atd.) do vašeho projektu React jako prvek SVG.

SVG (Scalable Vector Graphics) jsou podporovány nejen všemi hlavními prohlížeči, ale ve srovnání s jinými formáty obrázků zabírají méně místa a umožňují nám stylovat ikony bez ztráty kvality.

Pojďme k terminálu a nainstalujte ikony Reactu. V adresáři projektu spusťte tento příkaz:

npm install react-icons

# or its equivalent yarn command

yarn add react-icons

Po dokončení instalace přejděte na web s ikonami a podívejte se na všechny ikony, které máme k dispozici.

Jak vidíte na levém panelu, můžete kliknout na dostupnou knihovnu písem a vyhledat ikony, které chcete do projektu přidat. Můžete to udělat procházením dlouhého seznamu nebo jednoduše použít CTRL + F nebo CMD + F k vyhledání konkrétních ikon.

Dalším způsobem, jak hledat ikony, je využít vyhledávání. Do které knihovny ikona patří, můžete zjistit předponu (první dvě písmena ikony). Tuto předponu použijete také při importu ikony.

Ikony React exportují ikony jako součást React a používají ES6 import k přidání ikon do projektu.

Změna tlačítka pro odstranění za ikonu

Nyní již umíme vyhledávat ikony. V případě naší aplikace todos přidáváme ikony odstranění a přidání. Takže můžeme vybrat: FaPlusCircle a FaTrash.

Budeme používat FaPlusCircle v souboru InputTodo.js, který má nahradit text „Odeslat“ text a FaTrash v souboru TodoItem.js, který má nahradit text „Delete“.

Otevřete soubor InputTodo.js a naimportujte ikony:

import { FaPlusCircle } from "react-icons/fa"

Poté najděte tento řádek:

<button className="input-submit">Submit</button>

A nahraďte text komponentou Ikona.

<button className="input-submit">
  <FaPlusCircle />
</button>

Uložte soubor a přejděte do souboru TodoItem.js.

Přidejte toto na začátek souboru:

import { FaTrash } from "react-icons/fa"

Pak najděte toto:

<button onClick={() => props.deleteTodoProps(id)}>Delete</button>

A nahraďte tímto:

<button onClick={() => props.deleteTodoProps(id)}>
  <FaTrash />
</button>

Uložte soubor a zkontrolujte rozhraní. Měli byste vidět ikony SVG.

Než se pustíme do úpravy ikon, udělejme si několik poznámek.

Jak je vidět výše, importovali jsme ikony ze sady ikon FontAwesome. Viz název knihovny ikon s předponou před ikonou. Každá ze sad ikon má také svoji cestu, jak je vidět v prohlášení o importu.

ES6 import nám umožňuje zahrnout pouze ikony, které naše aplikace používá, místo aby přinesly všechny ikony (které mají tendenci zvětšovat velikost naší aplikace) ze sady.

Stylování ikon

Ve výchozím nastavení ikony dědí styly CSS nadřazeného prvku. Můžete pokračovat a stylovat je přímo ve vašem souboru CSS jako SVG pomocí cílení na jeho nadřazený prvek.

.input-submit svg {
  color: darkcyan;
  font-size: 20px;
  margin-top: 2px;
}

Ikony React nám také umožňují předat jedinečné vlastnosti (včetně color, size a className) pro styl jednotlivých ikon.

<button className="input-submit">
  <FaPlusCircle color="darkcyan" size="20px" className="submit-icon" />
</button>

Stejně jako prvek JSX můžete předat vlastnost style k přizpůsobení ikon.

Zpět do souboru InputTodo.js. Aktualizujte ikonu, abyste měli:

<button className="input-submit">
  <FaPlusCircle
    style={{ color: "darkcyan", fontSize: "20px", marginTop: "2px" }}
  />
</button>

Uložte soubor.

Ve výše uvedeném kódu není nic zvláštního.

Udělejme totéž pro ikonu odstranění. Otevřete soubor TodoItem.js a aktualizujte ikonu, abyste měli:

<button onClick={() => props.deleteTodoProps(id)}>
  <FaTrash style={{ color: "orangered", fontSize: "16px" }} />
</button>

Uložte a zobrazte styly použité v rozhraní frontend.

Stylování ikon Reactu pomocí IconContext

Možná budete chtít stylovat více ikon vedle sebe, aniž byste je chtěli zacílit do souboru CSS (jednodušší metoda). React icons nám umožňuje konfigurovat vlastnosti ikon pomocí React Context API .

K jeho implementaci nemusíte znát kontextové API. Je to velmi přímočaré.

Nejprve musíte importovat IconContext z modulu react-icons.

import { IconContext } from "react-icons"

Poté zabalíte všechny své ikony komponentou Provider a přiřadíte k value, objekt Provider skládající se z jedinečných klíčů (poskytovaných react ikonami) a hodnotových párů.

Budete mít něco takového:

<IconContext.Provider
  value={{
    color: "darkcyan",
    style: { fontSize: "20px", color: "#ff0000" },
    className: "submit-iconn",
  }}
>
  <button className="input-submit">
    <FaPlusCircle />
    <FaPlusCircle />
    <FaPlusCircle />
  </button>
</IconContext.Provider>

Klíč style (jako atribut style) přijímá objekt s camelcase vlastností, na rozdíl od ostatních dostupných klíčů, který přijímá řetězec.

Barva přiřazená pomocí klíče style přepíše barvu přiřazenou přímo value.

Výměna textu tlačítka za ikony nabídek

V souboru Navbar.js importujte tyto ikony z příslušné sady ikon.

import { MdClose } from "react-icons/md"
import { FiMenu } from "react-icons/fi"

Poté text v tlačítku nahraďte těmito ikonami.

<button onClick={handleToggle}>
  {navbarOpen ? (
    <MdClose style={{ color: "#fff", width: "40px", height: "40px" }} />
  ) : (
    <FiMenu style={{ color: "#7b7b7b", width: "40px", height: "40px" }} />
  )}
</button>

Všimněte si, že jsme přidali ke každému z tlačítek style. Uložte soubor a zkontrolujte frontend, kde uvidíte vaše změny.

Jednoduché, že?

Než začneme, pojďme jednoduše stylizovat prvek button a stránku About.

V nabídce aktualizujeme styly App.css .navbar tlačítek tak, aby zahrnovaly pozadí a ohraničení.

.navBar button {
  ... /* addition */ background: transparent;;
  border: none;
}

Dobrý.

Na stránce s informacemi přidejme názvy tříd ke stylování komponenty.

V souboru About.js přidejte názvy tříd, abyste měli:

const About = () => {
  const { url, path } = useRouteMatch()
  return (
    <div className="about__content">
      <ul className="about__list">...</ul>
      ...
    </div>
  )
}

Pak v souboru SinglePage.js

const SinglePage = () => {
  ...
  return (
    <div className="main__content">
      ...
    </div>
  )
}

Nyní soubor App.css aktualizujte, abyste měli:

/* about page */

.about__content {
  padding: 8rem 40px;
  display: flex;
}

.about__list {
  list-style: none;
  flex: 2;
  margin-right: 15px;
}

.about__list a {
  color: #9f9f9f;
  text-transform: capitalize;
  padding: 20px 0;
  font-weight: 600;
}

.about__list a:hover {
  color: #000;
}

.main__content {
  flex: 7;
}

.main__content h1 {
  margin-bottom: 15px;
  line-height: 30px;
  font-size: 30px;
}

.main__content p {
  line-height: 25px;
}

Dobrý.

Uložte a otestujte svou aplikaci.

Gratuluji. Nyní máte plně funkční aplikaci React.