Ha olyan React-könyvtárat keres, amely segít hozzáférhető összetevők létrehozásában, akkor jó helyen jár!

A React Aria Components egy olyan könyvtár, amely stílustalan komponensek gyűjteményét tartalmazza, amelyek a React Aria horgokra épülnek.

Az Adobe fejlesztette, és része a React Spectrum projektnek, amelynek célja egy átfogó könyvtárak és eszközök gyűjteménye, amelyek segítenek a fejlesztőknek adaptív, hozzáférhető és robusztus felhasználók kialakításában tapasztalatokat.

A React Aria összetevőinek megértése

React Aria Components a WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) bevált gyakorlatai szerint biztosítja a kisegítő lehetőségeket, a felhasználói interakciókat és a viselkedést. Ellentétben a React Aria könyvtárral, amely React horgokat használ az alkatrészeinek megépítéséhez.

A React Aria Components könyvtár előre beépített összetevőket kínál, beleértve a gombokat, jelölőnégyzeteket, csúszkákat stb. Ezek az összetevők nincsenek stílusosak, lehetővé téve az alkalmazás megjelenésének és érzetének kialakítását, ahogyan szeretné.

A React Aria komponensek használatának előnyei

A React Aria Components könyvtár számos előnnyel rendelkezik, többek között:

  • Megközelíthetőség: A React Aria összetevői követik a WAI-ARIA legjobb gyakorlatait, biztosítva, hogy alkalmazása minden felhasználó számára elérhető legyen, beleértve a kisegítő technológiákat használókat is.
  • Rugalmasság: A React Aria összetevői stílustalanul érkeznek, lehetővé téve a tervezési rendszer megkötések nélküli megvalósítását.
  • Felhasználói interakciók: A React Aria robusztus kezelést biztosít a felhasználói interakciókhoz, beleértve a billentyűzet, az egér és az érintés interakcióit.
  • Nemzetközivé válás: A React Aria támogatja a jobbról balra haladó nyelveket, a dátum- és számformázást és még sok mást, így könnyebben készíthet nemzetközi alkalmazásokat.

React alkalmazások létrehozása React Aria komponensekkel

Nézzük meg egy egyszerű React alkalmazás felépítését a React Aria Components segítségével. Mielőtt a React Aria Components könyvtárat használná a React alkalmazásokban, létre kell hoznia egy React projektet. A Vite nagyszerű módja ennek.

React alkalmazás létrehozása

A React alkalmazás Vite segítségével történő létrehozásához futtassa a következő kódot a terminálon:

npm init vite

A fenti kód futtatása egy sor felszólítást indít el, amelyek segítenek az új React-projekt létrehozásában.

Például:

A projekt létrehozása után telepítenie kell a szükséges függőségeket. Ehhez futtassa a következő kódot a terminálon:

cd react-aria-app
npm install

Az aktuális könyvtárat a projekt könyvtárává változtatja, majd telepíti a szükséges függőségeket. Miután létrehozta a React alkalmazást, telepítheti a React Aria Components könyvtárat, hogy kisegítő lehetőségeket adjon hozzá az alkalmazáshoz.

A React Aria komponensek telepítése

A React Aria Components könyvtárat npm vagy yarn használatával telepítheti. Az npm-en keresztüli telepítéshez futtassa a következő parancsot a terminálon:

npm install react-aria-components

Alternatív megoldásként a fonallal történő telepítéshez futtassa ezt a kódot:

yarn add react-aria-components

Most, hogy telepítette a React Aria Components könyvtárat, használhatja az összetevőit az alkalmazásban.

A React Aria komponensek használata

A React Aria Components könyvtár számos olyan összetevőt kínál, amelyek megkönnyítik és felgyorsítják a fejlesztési folyamatot. A könyvtár összetevőjének használatához importálja azt az alkalmazásába, és jelenítse meg.

Például:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

A fenti kódblokk importálja a Gomb, Popover, DialogTrigger, és Párbeszéd alkatrészek a react-aria-komponensek modult. Az összes importált összetevő létrehoz egy egyszerű gombot, amelyre kattintáskor megjelenik egy felugró ablak.

A DialogTrigger komponens szabályozza a párbeszédpanel vagy az előugró ablak láthatóságát. Benne DialogTrigger, ott van a Gomb összetevő. Ez a gomb aktiválja a láthatóságot Popover és Párbeszéd.

A Popover komponens egy tároló, amely felugrik a felhasználói felület többi részén, míg a Párbeszéd összetevő az alkalmazás feletti rétegben jeleníti meg a tartalmat. Benne Popover komponens a Párbeszéd komponens a szöveggel – Megnyomtad a gombot."

A gombra kattintva megjelenik egy felugró ablak a szöveggel "Megnyomtad a gombot" a képernyőn, így a felület az alábbi képhez hasonló megjelenést kölcsönöz.

Amint a fenti képen látható, a könyvtár összetevői stílustalanok, így kiválaszthatja a kívánt stílust.

Alkatrészei stílusának kialakítása

Mivel a React Aria komponensek stílustalanok, tetszés szerint alakíthatod őket. Te tudod használni Lépcsőzetes stíluslapok (CSS), Tailwind CSS, styled-components, vagy bármely más, általad preferált stílusmódszer.

Különféle szokásokat adhat át osztálynevek az összetevőkhöz, majd adja meg a CSS-osztályokat a CSS-fájlban.

Íme egy példa:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

Ebben a példában definiálja a osztály név a Gomb, Popover, és Párbeszéd alkatrészek. Most stílusozhatja a CSS-fájl összetevőit.

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

Az összetevők stílusának meghatározása után a gombnak és a felugró ablaknak valahogy így kell kinéznie.

Ha nem szeretne szokást meghatározni osztály név az összetevők esetében a React Aria Components könyvtár tartalmaz egy alapértelmezett értéket osztály név minden alkatrészhez. Az alapértelmezett osztály név van react-aria-componentName, ahol komponensnév a stílusozni kívánt összetevő neve.

Például:

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

Vegye figyelembe, hogy a fenti CSS-kódblokk ezeket a stílusokat mindenre alkalmazza Gomb, Popover, és Párbeszéd az alkalmazásban használt összetevőt.

Hozzáférhető és interaktív reagálási alkalmazások létrehozása

A React Aria Components egy hatékony könyvtár az elérhető és interaktív React alkalmazások létrehozásához. Olyan összetevőket biztosít, amelyek kezelik a felhasználói interakciókat és a hozzáférést a WAI-ARIA legjobb gyakorlatai szerint. Ha olyan komponens könyvtárat keres, amely sok összetevőt és rugalmasságot kínál, a React Aria Components kiváló választás.

A React Aria Components könyvtár mellett vannak más stílustalan komponenskönyvtárak is, amelyek segítségével gyönyörű React alkalmazásokat hozhat létre. Az egyik ilyen könyvtár tartalmazza a Radix UI-t. A Radix UI egy stílustalan komponenskönyvtár kiváló minőségű React-alkalmazások készítéséhez. Ez egy nagyszerű alternatíva a React Aria Components számára.