Tworzenie dostępnych aplikacji React za pomocą komponentów React Aria

Tworzenie dostępnych aplikacji React za pomocą komponentów React Aria

React Aria Components to biblioteka zawierająca zbiór niestylizowanych komponentów zbudowanych na bazie hooków React Aria.





MUO Film dnia PRZEWIŃ, ABY KONTYNUOWAĆ TREŚĆ

Został opracowany przez firmę Adobe i stanowi część projektu React Spectrum, którego celem jest stworzenie obszernego zbioru bibliotek i narzędzi pomagających programistom w tworzeniu adaptacyjnych, dostępnych i niezawodnych doświadczeń użytkownika.



Zrozumienie komponentów React Aria

Reaguj na komponenty Arii zapewnia dostępność, interakcje użytkowników i zachowanie zgodnie z najlepszymi praktykami WAI-ARIA (Inicjatywa dostępności sieci - dostępne bogate aplikacje internetowe). W przeciwieństwie do biblioteki React Aria, która używa haków React do budowy komponentów.





Biblioteka React Aria Components oferuje zestaw gotowych komponentów, w tym przyciski, pola wyboru, suwaki itp. Komponenty te nie są stylizowane, co pozwala na projektowanie wyglądu i sposobu działania aplikacji według własnych zamierzeń.

Korzyści ze stosowania komponentów React Aria

Biblioteka React Aria Components oferuje wiele korzyści, w tym:



  • Dostępność : Komponenty React Aria są zgodne z najlepszymi praktykami WAI-ARIA, zapewniając dostępność aplikacji dla wszystkich użytkowników, w tym osób korzystających z technologii wspomagających.
  • Elastyczność : Komponenty React Aria nie są stylizowane, co pozwala na wdrożenie systemu projektowego bez ograniczeń.
  • Interakcje użytkowników : React Aria zapewnia niezawodną obsługę interakcji użytkownika, w tym interakcji klawiatury, myszy i dotyku.
  • Umiędzynarodowienie : React Aria obsługuje języki pisane od prawej do lewej, formatowanie dat i liczb i wiele więcej, ułatwiając tworzenie umiędzynarodowionych aplikacji.

Tworzenie aplikacji React za pomocą komponentów React Aria

Przejdźmy przez proces tworzenia prostej aplikacji React przy użyciu komponentów React Aria. Zanim użyjesz biblioteki React Aria Components w swoich aplikacjach React, musisz utworzyć projekt React. Vite jest na to świetnym sposobem .

Tworzenie aplikacji React

Aby utworzyć aplikację React za pomocą Vite, uruchom następujący kod w swoim terminalu:



npm init vite

Uruchomienie powyższego kodu uruchomi serię podpowiedzi, które pomogą Ci stworzyć nowy projekt React.

Na przykład:



reagują na monity projektu

Po utworzeniu projektu będziesz musiał zainstalować niezbędne zależności. Aby to zrobić, uruchom następujący kod w terminalu:

cd react-aria-app 
npm install

Zmieni Twój bieżący katalog na katalog projektu, a następnie zainstaluje niezbędne zależności. Po utworzeniu aplikacji React możesz zainstalować bibliotekę React Aria Components, aby dodać funkcje ułatwień dostępu do swojej aplikacji.

Instalowanie komponentów React Aria

Możesz zainstalować bibliotekę React Aria Components przy użyciu npm lub przędzy. Aby zainstalować go przez npm, uruchom następującą komendę w terminalu:

npm install react-aria-components

Alternatywnie, aby zainstalować za pomocą przędzy, uruchom ten kod:

yarn add react-aria-components

Teraz, gdy masz już zainstalowaną bibliotekę React Aria Components, możesz używać jej komponentów w swojej aplikacji.

sprawdź pocztę icloud na telefonie z Androidem

Korzystanie z komponentów React Aria

Biblioteka React Aria Components oferuje różnorodne komponenty, dzięki którym proces programowania jest łatwiejszy i szybszy. Aby skorzystać z komponentu biblioteki, zaimportuj go do swojej aplikacji i wyrenderuj.

Na przykład:

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;

Powyższy blok kodu importuje plik Przycisk , Popover , Wyzwalacz okna dialogowego , I Dialog komponenty z komponenty-aria-reaguj moduł. Wszystkie zaimportowane komponenty tworzą prosty przycisk, który po kliknięciu wyświetla wyskakujące okienko.

The Wyzwalacz okna dialogowego komponent kontroluje widoczność okna dialogowego lub wyskakującego okienka. W środku Wyzwalacz okna dialogowego , jest Przycisk część. Ten przycisk uruchamia widoczność Popover I Dialog .

The Popover komponent to kontener, który pojawia się nad resztą interfejsu użytkownika, podczas gdy plik Dialog komponent wyświetla zawartość w warstwie nad aplikacją. W środku Popover komponentem jest A Dialog element z tekstem „Kliknąłeś przycisk . '

Kliknięcie przycisku spowoduje wyświetlenie wyskakującego okienka z tekstem „Kliknąłeś przycisk” na ekranie, nadając interfejsowi wygląd podobny do poniższego obrazka.

reakcja-aria

Jak widać na powyższym obrazku, komponenty biblioteki nie są stylizowane, więc możesz wybrać preferowaną stylizację.

Stylizowanie komponentów

Ponieważ komponenty React Aria nie są stylizowane, możesz je stylizować w dowolny sposób. Możesz użyć Kaskadowe arkusze stylów (CSS) , CSS Tailwind, komponenty stylizowane lub dowolną inną preferowaną metodę stylizacji.

Możesz przekazać inny zwyczaj nazwy klas do komponentów, a następnie zdefiniuj klasy CSS w pliku CSS.

Oto przykład:

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;

W tym przykładzie definiujesz a Nazwa klasy dla Przycisk , Popover , I Dialog składniki. Możesz teraz stylizować komponenty w swoim pliku CSS.

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

Po zdefiniowaniu stylów komponentów przycisk i wyskakujące okienko powinny wyglądać mniej więcej tak.

w stylu popover-aria-reaguj

Jeśli nie chcesz definiować zwyczaju Nazwa klasy dla twoich komponentów biblioteka React Aria Components zawiera wersję domyślną Nazwa klasy dla każdego komponentu. Domyślny Nazwa klasy Jest nazwa-komponentu reakcji , Gdzie Nazwa komponentu to nazwa komponentu, któremu chcesz nadać styl.

Na przykład:

ile artyści zarabiają na spotify? 
.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; 
}

Zauważ, że powyższy blok kodu CSS zastosuje te style do każdego Przycisk , Popover , I Dialog komponent, którego używasz w swojej aplikacji.

Twórz dostępne i interaktywne aplikacje React

React Aria Components to potężna biblioteka do tworzenia dostępnych i interaktywnych aplikacji React. Zapewnia komponenty obsługujące interakcje użytkownika i dostępność zgodnie z najlepszymi praktykami WAI-ARIA. Jeśli szukasz biblioteki komponentów oferującej wiele komponentów i elastyczność, React Aria Components będzie doskonałym wyborem.

Oprócz biblioteki React Aria Components istnieją inne biblioteki komponentów bez stylu, których możesz używać do tworzenia pięknych aplikacji React. Jedna z tych bibliotek zawiera interfejs użytkownika Radix. Radix UI to niestylizowana biblioteka komponentów do tworzenia wysokiej jakości aplikacji React. Jest to świetna alternatywa dla React Aria Components.