Izveidojiet pieejamas React lietojumprogrammas, izmantojot React Aria komponentus

React Aria Components ir bibliotēka, kurā ir bez stila komponentu kolekcija, kas veidota uz React Aria āķiem.

To izstrādājis Adobe, un tas ir daļa no React Spectrum projekta, kura mērķis ir izveidot visaptverošu bibliotēku un rīku kolekcija, kas palīdz izstrādātājiem izveidot adaptīvu, pieejamu un stabilu lietotāju pieredzi.

React Aria komponentu izpratne

Reaģējiet uz Aria komponentiem nodrošina pieejamību, lietotāju mijiedarbību un uzvedību saskaņā ar WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) paraugpraksi. Atšķirībā no React Aria bibliotēkas, kas izmanto React āķus lai izveidotu savas sastāvdaļas.

Bibliotēka React Aria Components piedāvā iepriekš izveidotu komponentu komplektu, tostarp pogas, izvēles rūtiņas, slīdņus utt. Šie komponenti nav veidoti, ļaujot jums izveidot lietojumprogrammas izskatu un darbību, kā vēlaties.

React Aria komponentu izmantošanas priekšrocības

React Aria Components bibliotēka piedāvā daudzas priekšrocības, tostarp:

• Pieejamība: React Aria komponenti ievēro WAI-ARIA paraugpraksi, nodrošinot, ka jūsu lietojumprogramma ir pieejama visiem lietotājiem, tostarp tiem, kas izmanto palīgtehnoloģijas.
• Elastīgums: React Aria komponenti tiek piegādāti bez stila, ļaujot ieviest dizaina sistēmu bez ierobežojumiem.
• Lietotāju mijiedarbības: React Aria nodrošina spēcīgu lietotāja mijiedarbības, tostarp tastatūras, peles un pieskāriena mijiedarbības, apstrādi.
• Internacionalizācija: React Aria atbalsta valodas no labās puses uz kreiso, datuma un skaitļu formatējumu un daudz ko citu, atvieglojot internacionalizētu lietojumprogrammu izveidi.

Izveidojiet React lietotnes, izmantojot React Aria komponentus

Apskatīsim vienkāršas React lietojumprogrammas izveidi, izmantojot React Aria Components. Pirms React Aria Components bibliotēkas izmantošanas React lietojumprogrammās, jums ir jāizveido React projekts. Vite ir lielisks veids, kā to izdarīt.

Jūsu React lietojumprogrammas izveide

Lai izveidotu React lietojumprogrammu, izmantojot Vite, terminālī palaidiet šādu kodu:

npm init vite

Palaižot iepriekš minēto kodu, tiks parādīta virkne uzvedņu, kas palīdzēs jums izveidot jauno React projektu.

Piemēram:

Pēc projekta izveides jums būs jāinstalē nepieciešamās atkarības. Lai to izdarītu, terminālī palaidiet šādu kodu:

cd react-aria-app

npm install

Tas mainīs jūsu pašreizējo direktoriju uz projekta direktoriju un pēc tam instalēs nepieciešamās atkarības. Kad esat izveidojis React lietojumprogrammu, varat instalēt React Aria Components bibliotēku, lai savai lietojumprogrammai pievienotu pieejamības līdzekļus.

React Aria komponentu instalēšana

Varat instalēt React Aria Components bibliotēku, izmantojot npm vai dziju. Lai to instalētu, izmantojot npm, terminālī palaidiet šādu komandu:

npm install react-aria-components

Alternatīvi, lai instalētu, izmantojot dziju, palaidiet šo kodu:

yarn add react-aria-components

Tagad, kad esat instalējis React Aria Components bibliotēku, varat izmantot tās komponentus savā lietojumprogrammā.

Izmantojot React Aria komponentus

React Aria Components bibliotēka piedāvā dažādus komponentus, kas atvieglo un paātrina izstrādes procesu. Lai izmantotu bibliotēkas komponentu, importējiet to savā lietojumprogrammā un atveidojiet to.

Piemēram:

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;

Iepriekš esošais koda bloks importē Poga, Popover, DialogTrigger, un Dialogs sastāvdaļas no react-aria-komponenti modulis. Visi importētie komponenti izveido vienkāršu pogu, kas parāda uznirstošo logu, noklikšķinot uz tā.

The DialogTrigger komponents kontrolē dialoga vai uznirstošā loga redzamību. Iekšpusē DialogTrigger, tur ir Poga komponents. Šī poga aktivizē redzamību Popover un Dialogs.

The Popover komponents ir konteiners, kas tiek parādīts pārējā lietotāja saskarnē, savukārt Dialogs komponents parāda saturu slānī virs lietotnes. Iekšpusē Popover sastāvdaļa ir a Dialogs komponents ar tekstu "Jūs nospiedāt pogu."

Noklikšķinot uz pogas, tiks parādīts uznirstošais logs ar tekstu "Jūs noklikšķinājāt uz pogas" ekrānā, piešķirot interfeisam līdzīgu izskatu tālāk redzamajam attēlam.

Kā redzat attēlā iepriekš, bibliotēkas komponenti ir bez stila, lai jūs varētu izvēlēties vēlamo stilu.

Sastāvdaļu veidošana

Tā kā React Aria komponenti tiek piegādāti bez stila, varat tos veidot, kā vien vēlaties. Tu vari izmantot Kaskādes stila lapas (CSS), Tailwind CSS, stilizēti komponenti vai jebkura cita stila veidošanas metode, kas jums patīk.

Jūs varat nodot dažādus pasūtījumus klases nosaukumi komponentiem un pēc tam definējiet CSS klases savā CSS failā.

Šeit ir piemērs:

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;

Šajā piemērā jūs definējat a klasesNosaukums priekš Poga, Popover, un Dialogs sastāvdaļas. Tagad varat veidot CSS faila 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;
}

Pēc komponentu stilu noteikšanas pogai un uznirstošajam logam vajadzētu izskatīties apmēram šādi.

Ja nevēlaties definēt pasūtījumu klasesNosaukums jūsu komponentiem React Aria Components bibliotēkā ir iekļauta noklusējuma vērtība klasesNosaukums katrai sastāvdaļai. Noklusējums klasesNosaukums ir react-aria-componentName, kur komponenta nosaukums ir tā komponenta nosaukums, kuru vēlaties veidot.

Piemēram:

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

Ņemiet vērā, ka iepriekš minētais CSS koda bloks izmantos šos stilus visiem Poga, Popover, un Dialogs komponents, ko izmantojat savā lietojumprogrammā.

Veidojiet pieejamas un interaktīvas reaģēšanas lietojumprogrammas

React Aria Components ir jaudīga bibliotēka pieejamu un interaktīvu React lietojumprogrammu izveidei. Tas nodrošina komponentus, kas nodrošina lietotāja mijiedarbību un pieejamību saskaņā ar WAI-ARIA paraugpraksi. Ja meklējat komponentu bibliotēku, kas piedāvā daudz komponentu un elastību, React Aria Components ir lieliska izvēle.

Līdzās React Aria Components bibliotēkai ir arī citas bez stila komponentu bibliotēkas, kuras varat izmantot, lai izveidotu skaistas React lietojumprogrammas. Viena no šīm bibliotēkām ietver Radix UI. Radix UI ir bez stila komponentu bibliotēka augstas kvalitātes React lietotņu izveidei. Tā ir lieliska alternatīva React Aria Components.