Opbygning af tilgængelige React-applikationer med React Aria-komponenter

React Aria Components er et bibliotek, der indeholder en samling af ustylede komponenter bygget oven på React Aria-kroge.

MUO Video af dagen RUL FOR AT FORTSÆTTE MED INDHOLD

Det er udviklet af Adobe og er en del af React Spectrum-projektet, som har til formål at skabe en omfattende samling af biblioteker og værktøjer, der hjælper udviklere med at opbygge adaptive, tilgængelige og robuste brugeroplevelser.

Forståelse af React Aria-komponenter

Reager Aria-komponenter giver tilgængelighed, brugerinteraktioner og adfærd i henhold til WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) bedste praksis. I modsætning til React Aria-biblioteket, som bruger React kroge at bygge dine komponenter.

React Aria Components-biblioteket tilbyder et sæt forudbyggede komponenter, inklusive knapper, afkrydsningsfelter, skydere osv. Disse komponenter er ikke stylet, hvilket giver dig mulighed for at designe applikationens udseende og fornemmelse, som du har tænkt dig.

Fordele ved at bruge React Aria-komponenter

React Aria Components-biblioteket byder på mange fordele, herunder:

Tilgængelighed : React Aria-komponenter følger WAI-ARIA bedste praksis, hvilket sikrer, at din applikation er tilgængelig for alle brugere, inklusive dem, der bruger hjælpeteknologier.
Fleksibilitet : React Aria-komponenter kommer ustylede, så du kan implementere dit designsystem uden begrænsninger.
Brugerinteraktioner : React Aria giver robust håndtering af brugerinteraktioner, herunder tastatur-, mus- og berøringsinteraktioner.
Internationalisering : React Aria understøtter højre-til-venstre-sprog, dato- og talformatering og mere, hvilket gør det nemmere at bygge internationaliserede applikationer.

Byg React-apps med React Aria-komponenter

Lad os gå gennem opbygningen af en simpel React-applikation ved hjælp af React Aria-komponenter. Før du bruger React Aria Components-biblioteket i dine React-applikationer, skal du oprette et React-projekt. Vite er en fantastisk måde at gøre dette på .

Oprettelse af din React-applikation

For at oprette din React-applikation ved hjælp af Vite skal du køre følgende kode i din terminal:

npm init vite

Hvis du kører koden ovenfor, starter du en række meddelelser, der hjælper dig med at oprette dit nye React-projekt.

hvordan slippe af med annoncer på instagram

For eksempel:

Når du har oprettet dit projekt, skal du installere de nødvendige afhængigheder. For at gøre dette skal du køre følgende kode i din terminal:

cd react-aria-app

npm install

Det vil ændre din nuværende mappe til projektets bibliotek og derefter installere de nødvendige afhængigheder. Når du har oprettet din React-applikation, kan du installere React Aria Components-biblioteket for at tilføje tilgængelighedsfunktioner til din applikation.

Installation af React Aria-komponenter

Du kan installere React Aria Components-biblioteket ved hjælp af npm eller garn. For at installere det via npm skal du køre følgende kommando i din terminal:

npm install react-aria-components

Alternativt, for at installere via garn, skal du køre denne kode:

yarn add react-aria-components

Nu hvor du har installeret React Aria Components-biblioteket, kan du bruge dets komponenter i din applikation.

Brug af React Aria-komponenterne

React Aria Components-biblioteket tilbyder en række komponenter, der gør udviklingsprocessen nemmere og hurtigere. For at bruge bibliotekets komponent skal du importere den til din applikation og gengive den.

For eksempel:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button>Click Me</Button> 
        <Popover> 
          <Dialog>You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

Kodeblokken ovenfor importerer Knap , Popover , DialogTrigger , og Dialog komponenter fra react-aria-komponenter modul. Alle de importerede komponenter skaber en simpel knap, der viser en popover, når der klikkes på dem.

Det DialogTrigger komponent styrer synligheden af en dialogboks eller popover. Inde i DialogTrigger , der er Knap komponent. Denne knap udløser synligheden af Popover og Dialog .

Det Popover komponent er en beholder, der dukker op over resten af brugergrænsefladen, mens Dialog komponent viser indhold i et lag over appen. Inde i Popover komponent er en Dialog komponent med teksten 'Du klikkede på knappen . '

bedste gratis musikafspiller til Android

Ved at klikke på knappen vises en popover med teksten 'Du har klikket på knappen' på din skærm, hvilket giver din grænseflade et lignende udseende som billedet nedenfor.

Som du kan se på billedet ovenfor, kommer bibliotekets komponenter ustylede, så du kan vælge din foretrukne styling.

Style dine komponenter

Da React Aria-komponenterne kommer ustylede, kan du style dem, som du vil. Du kan bruge Cascading Style Sheets (CSS) , Tailwind CSS, stylede-komponenter eller enhver anden stylingmetode, du foretrækker.

Du kan passere forskellige brugerdefinerede klassenavne til komponenterne, og definer derefter CSS-klasserne i din CSS-fil.

Her er et eksempel:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button className="button">Click Me</Button> 
        <Popover className="popover"> 
          <Dialog className="dialog">You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

I dette eksempel definerer du en klassenavn for Knap , Popover , og Dialog komponenter. Du kan nu style komponenterne i din CSS-fil.

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

Efter at have defineret stilene for dine komponenter, skal din knap og popover se nogenlunde sådan ud.

Hvis du ikke ønsker at definere en brugerdefineret klassenavn for dine komponenter inkluderer React Aria Components-biblioteket en standard klassenavn for hver komponent. Standarden klassenavn er react-aria-componentName , hvor komponentnavn er navnet på den komponent, du vil style.

For eksempel:

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

Bemærk, at CSS-kodeblokken ovenfor vil anvende disse stilarter på alle Knap , Popover , og Dialog komponent, du bruger i din applikation.

Byg tilgængelige og interaktive React-applikationer

React Aria Components er et kraftfuldt bibliotek til at bygge tilgængelige og interaktive React-applikationer. Den leverer komponenter, der håndterer brugerinteraktioner og tilgængelighed i overensstemmelse med WAI-ARIAs bedste praksis. Hvis du leder efter et komponentbibliotek, der tilbyder en masse komponenter og fleksibilitet, er React Aria Components et glimrende valg.

Ved siden af React Aria Components-biblioteket er der andre ustylede komponentbiblioteker, du kan bruge til at bygge smukke React-applikationer. Et af disse biblioteker inkluderer Radix UI. Radix UI er et ustylet komponentbibliotek til at bygge React-apps af høj kvalitet. Det er et godt alternativ til React Aria-komponenter.