Kurkite prieinamas „React“ programas naudodami „React Aria“ komponentus

„React Aria Components“ yra biblioteka, kurioje yra nestilių komponentų kolekcija, sukurta ant „React Aria“ kabliukų.

Jį sukūrė „Adobe“ ir yra „React Spectrum“ projekto dalis, kuria siekiama sukurti visapusišką bibliotekų ir įrankių rinkinys, padedantis kūrėjams sukurti prisitaikantį, prieinamą ir patikimą vartotoją patirtys.

„React Aria“ komponentų supratimas

Reaguoti Aria komponentus užtikrina prieinamumą, naudotojų sąveiką ir elgesį pagal WAI-ARIA (žiniatinklio prieinamumo iniciatyva – prieinamos turtingos interneto programos) geriausią praktiką. Skirtingai nuo React Aria bibliotekos, kuri naudoja React kabliukus sukurti savo komponentus.

„React Aria Components“ biblioteka siūlo iš anksto sukurtų komponentų rinkinį, įskaitant mygtukus, žymimuosius laukelius, slankiklius ir kt. Šie komponentai nėra stiliaus, todėl galite kurti programos išvaizdą ir pojūtį taip, kaip norite.

„React Aria“ komponentų naudojimo pranašumai

„React Aria Components“ biblioteka siūlo daug privalumų, įskaitant:

• Prieinamumas: „React Aria“ komponentai vadovaujasi WAI-ARIA geriausia praktika, užtikrindami, kad jūsų programa būtų prieinama visiems naudotojams, įskaitant tuos, kurie naudojasi pagalbinėmis technologijomis.
• Lankstumas: „React Aria“ komponentai pateikiami be stiliaus, todėl galite įgyvendinti savo dizaino sistemą be apribojimų.
• Vartotojo sąveika: „React Aria“ užtikrina patikimą vartotojo sąveiką, įskaitant klaviatūros, pelės ir lietimo sąveikas.
• Internacionalizacija: React Aria palaiko kalbas iš dešinės į kairę, datos ir skaičių formatavimą ir dar daugiau, todėl lengviau kurti tarptautines programas.

Kurkite „React“ programas naudodami „React Aria“ komponentus

Pažiūrėkime, kaip sukurti paprastą „React“ programą naudodami „React Aria Components“. Prieš naudodami React Aria Components biblioteką savo React programose, turite sukurti React projektą. Vite yra puikus būdas tai padaryti.

„React“ programos kūrimas

Norėdami sukurti „React“ programą naudodami „Vite“, savo terminale paleiskite šį kodą:

npm init vite

Paleidus aukščiau pateiktą kodą, bus paleista eilė raginimų, padėsiančių sukurti naują „React“ projektą.

Pavyzdžiui:

Sukūrę projektą turėsite įdiegti reikiamas priklausomybes. Norėdami tai padaryti, savo terminale paleiskite šį kodą:

cd react-aria-app

npm install

Tai pakeis jūsų dabartinį katalogą į projekto katalogą ir įdiegs reikiamas priklausomybes. Sukūrę „React“ programą, galite įdiegti „React Aria Components“ biblioteką, kad prie programos pridėtumėte pritaikymo neįgaliesiems funkcijų.

„React Aria“ komponentų diegimas

Galite įdiegti „React Aria Components“ biblioteką naudodami npm arba siūlą. Norėdami jį įdiegti per npm, savo terminale paleiskite šią komandą:

npm install react-aria-components

Arba, norėdami įdiegti per verpalą, paleiskite šį kodą:

yarn add react-aria-components

Dabar, kai įdiegėte „React Aria Components“ biblioteką, galite naudoti jos komponentus savo programoje.

„React Aria“ komponentų naudojimas

„React Aria Components“ biblioteka siūlo įvairius komponentus, kurie palengvina ir pagreitina kūrimo procesą. Norėdami naudoti bibliotekos komponentą, importuokite jį į programą ir atvaizduokite.

Pavyzdžiui:

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




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

Aukščiau pateiktas kodo blokas importuoja Mygtukas, Popover, DialogTrigger, ir Dialogas komponentai iš react-aria-komponentai modulis. Visi importuoti komponentai sukuria paprastą mygtuką, kurį spustelėjus rodomas iššokantis langas.

The DialogTrigger komponentas valdo dialogo arba iššokančiojo lango matomumą. Viduje DialogTrigger, yra Mygtukas komponentas. Šis mygtukas suaktyvina matomumą Popover ir Dialogas.

The Popover komponentas yra konteineris, kuris pasirodo likusioje vartotojo sąsajoje, o Dialogas komponentas rodo turinį sluoksnyje virš programos. Viduje Popover komponentas yra a Dialogas komponentas su tekstu „Paspaudei mygtuką."

Spustelėjus mygtuką bus rodomas iššokantis langas su tekstu "Jūs paspaudėte mygtuką" ekrane, todėl sąsaja atrodys panašiai kaip toliau pateiktame paveikslėlyje.

Kaip matote aukščiau esančiame paveikslėlyje, bibliotekos komponentai yra be stiliaus, kad galėtumėte pasirinkti pageidaujamą stilių.

Komponentų stiliaus kūrimas

Kadangi „React Aria“ komponentai yra be stiliaus, galite juos formuoti taip, kaip norite. Tu gali naudoti Kaskadiniai stiliaus lapai (CSS), Tailwind CSS, stiliaus komponentai arba bet koks kitas jums patinkantis stiliaus metodas.

Galite pereiti skirtingus papročius klasių vardai prie komponentų ir tada savo CSS faile apibrėžkite CSS klases.

Štai pavyzdys:

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




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

Šiame pavyzdyje jūs apibrėžiate a klasės pavadinimas už Mygtukas, Popover, ir Dialogas komponentai. Dabar galite formuoti savo CSS failo komponentus.

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

Apibrėžus komponentų stilius, mygtukas ir iššokantis langas turėtų atrodyti maždaug taip.

Jei nenorite apibrėžti papročio klasės pavadinimas jūsų komponentams „React Aria Components“ bibliotekoje yra numatytasis elementas klasės pavadinimas kiekvienam komponentui. Numatytoji klasės pavadinimas yra react-aria-componentName, kur komponento pavadinimas yra komponento, kurį norite stilizuoti, pavadinimas.

Pavyzdžiui:

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

Atminkite, kad aukščiau pateiktas CSS kodo blokas taikys šiuos stilius kiekvienam Mygtukas, Popover, ir Dialogas komponentas, kurį naudojate programoje.

Kurkite prieinamas ir interaktyvias reagavimo programas

„React Aria Components“ yra galinga biblioteka, skirta kurti prieinamas ir interaktyvias „React“ programas. Jame pateikiami komponentai, kurie tvarko vartotojo sąveiką ir pasiekiamumą pagal WAI-ARIA geriausią praktiką. Jei ieškote komponentų bibliotekos, kuri siūlo daug komponentų ir lankstumo, „React Aria Components“ yra puikus pasirinkimas.

Be React Aria Components bibliotekos, yra ir kitų nestilių komponentų bibliotekų, kurias galite naudoti kurdami gražias React programas. Viena iš šių bibliotekų apima Radix UI. Radix UI yra nestilių komponentų biblioteka, skirta kurti aukštos kokybės React programas. Tai puiki „React Aria Components“ alternatyva.