Αν ψάχνετε για μια βιβλιοθήκη React για να σας βοηθήσει να δημιουργήσετε προσβάσιμα στοιχεία, βρίσκεστε στο σωστό μέρος!

Το React Aria Components είναι μια βιβλιοθήκη που περιέχει μια συλλογή από στοιχεία χωρίς στυλ, χτισμένα πάνω από τα άγκιστρα React Aria.

Αναπτύχθηκε από την Adobe και αποτελεί μέρος του έργου React Spectrum, το οποίο στοχεύει στη δημιουργία ενός ολοκληρωμένου συλλογή βιβλιοθηκών και εργαλείων που βοηθούν τους προγραμματιστές να δημιουργήσουν προσαρμοστικούς, προσβάσιμους και ισχυρούς χρήστες εμπειρίες.

Κατανόηση των React Aria Components

React Aria Components παρέχει προσβασιμότητα, αλληλεπιδράσεις με τους χρήστες και συμπεριφορά σύμφωνα με τις βέλτιστες πρακτικές WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Σε αντίθεση με τη βιβλιοθήκη React Aria, η οποία χρησιμοποιεί React hooks για να φτιάξετε τα εξαρτήματά σας.

Η βιβλιοθήκη React Aria Components προσφέρει ένα σύνολο προκατασκευασμένων στοιχείων, συμπεριλαμβανομένων κουμπιών, πλαισίων ελέγχου, ρυθμιστικών κ.λπ. Αυτά τα στοιχεία δεν έχουν στυλ, επιτρέποντάς σας να σχεδιάσετε την εμφάνιση και την αίσθηση της εφαρμογής όπως θέλετε.

instagram viewer

Οφέλη από τη χρήση των React Aria Components

Η βιβλιοθήκη React Aria Components προσφέρει πολλά πλεονεκτήματα, όπως:

  • Προσιτότητα: Τα στοιχεία React Aria ακολουθούν τις βέλτιστες πρακτικές WAI-ARIA, διασφαλίζοντας ότι η εφαρμογή σας είναι προσβάσιμη σε όλους τους χρήστες, συμπεριλαμβανομένων εκείνων που χρησιμοποιούν υποστηρικτικές τεχνολογίες.
  • Ευκαμψία: Τα στοιχεία React Aria έρχονται χωρίς στυλ, επιτρέποντάς σας να εφαρμόσετε το σύστημα σχεδίασής σας χωρίς περιορισμούς.
  • Αλληλεπιδράσεις χρηστών: Το React Aria παρέχει ισχυρό χειρισμό των αλληλεπιδράσεων των χρηστών, συμπεριλαμβανομένων των αλληλεπιδράσεων με πληκτρολόγιο, ποντίκι και αφής.
  • Διεθνοποίηση: Το React Aria υποστηρίζει γλώσσες από δεξιά προς τα αριστερά, μορφοποίηση ημερομηνίας και αριθμού και πολλά άλλα, διευκολύνοντας τη δημιουργία διεθνοποιημένων εφαρμογών.

Δημιουργία εφαρμογών React με στοιχεία React Aria

Ας προχωρήσουμε στη δημιουργία μιας απλής εφαρμογής React χρησιμοποιώντας το React Aria Components. Πριν χρησιμοποιήσετε τη βιβλιοθήκη React Aria Components στις εφαρμογές σας React, πρέπει να δημιουργήσετε ένα έργο React. Το Vite είναι ένας πολύ καλός τρόπος για να το κάνετε αυτό.

Δημιουργία της εφαρμογής React σας

Για να δημιουργήσετε την εφαρμογή React χρησιμοποιώντας το Vite, εκτελέστε τον ακόλουθο κώδικα στο τερματικό σας:

npm init vite

Η εκτέλεση του παραπάνω κώδικα θα ξεκινήσει μια σειρά από μηνύματα που θα σας βοηθήσουν να δημιουργήσετε το νέο σας έργο React.

Για παράδειγμα:

Αφού δημιουργήσετε το έργο σας, θα χρειαστεί να εγκαταστήσετε τις απαραίτητες εξαρτήσεις. Για να το κάνετε αυτό, εκτελέστε τον ακόλουθο κώδικα στο τερματικό σας:

cd react-aria-app
npm install

Θα αλλάξει τον τρέχοντα κατάλογο στον κατάλογο του έργου και στη συνέχεια θα εγκαταστήσει τις απαραίτητες εξαρτήσεις. Αφού δημιουργήσετε την εφαρμογή React, μπορείτε να εγκαταστήσετε τη βιβλιοθήκη React Aria Components για να προσθέσετε λειτουργίες προσβασιμότητας στην εφαρμογή σας.

Εγκατάσταση React Aria Components

Μπορείτε να εγκαταστήσετε τη βιβλιοθήκη React Aria Components χρησιμοποιώντας npm ή νήμα. Για να το εγκαταστήσετε μέσω npm, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm install react-aria-components

Εναλλακτικά, για εγκατάσταση μέσω νήματος, εκτελέστε αυτόν τον κωδικό:

yarn add react-aria-components

Τώρα που έχετε εγκαταστήσει τη βιβλιοθήκη React Aria Components, μπορείτε να χρησιμοποιήσετε τα στοιχεία της στην εφαρμογή σας.

Χρήση των React Aria Components

Η βιβλιοθήκη React Aria Components προσφέρει μια ποικιλία στοιχείων που κάνουν τη διαδικασία ανάπτυξης ευκολότερη και ταχύτερη. Για να χρησιμοποιήσετε το στοιχείο της βιβλιοθήκης, εισαγάγετε το στην εφαρμογή σας και αποδώστε το.

Για παράδειγμα:

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







exportdefault App;

Το μπλοκ κώδικα παραπάνω εισάγει το Κουμπί, Ποπόβερ, DialogTrigger, και Διάλογος εξαρτήματα από το αντιδρούν-αρια-συστατικά μονάδα μέτρησης. Όλα τα εισαγόμενα στοιχεία δημιουργούν ένα απλό κουμπί που εμφανίζει ένα popover όταν κάνετε κλικ.

ο DialogTrigger Το στοιχείο ελέγχει την ορατότητα ενός διαλόγου ή ενός popover. μεσα στην DialogTrigger, εκεί είναι το Κουμπί συστατικό. Αυτό το κουμπί ενεργοποιεί την ορατότητα του Ποπόβερ και Διάλογος.

ο Ποπόβερ συστατικό είναι ένα κοντέινερ που εμφανίζεται πάνω από το υπόλοιπο περιβάλλον χρήστη, ενώ το Διάλογος Το στοιχείο εμφανίζει περιεχόμενο σε ένα επίπεδο πάνω από την εφαρμογή. μεσα στην Ποπόβερ συστατικό είναι α Διάλογος συστατικό με το κείμενο «Κάνατε κλικ στο κουμπί."

Κάνοντας κλικ στο κουμπί θα εμφανιστεί ένα popover με το κείμενο "Κάνατε κλικ στο κουμπί" στην οθόνη σας, δίνοντας στη διεπαφή σας παρόμοια εμφάνιση με την παρακάτω εικόνα.

Όπως μπορείτε να δείτε στην παραπάνω εικόνα, τα στοιχεία της βιβλιοθήκης έρχονται χωρίς στυλ, ώστε να μπορείτε να επιλέξετε το στυλ που προτιμάτε.

Στυλ των εξαρτημάτων σας

Δεδομένου ότι τα React Aria Components έρχονται χωρίς στυλ, μπορείτε να τα διαμορφώσετε όπως θέλετε. Μπορείς να χρησιμοποιήσεις Cascading Style Sheets (CSS), Tailwind CSS, styled-components ή οποιαδήποτε άλλη μέθοδο στυλ προτιμάτε.

Μπορείτε να περάσετε διαφορετικό έθιμο ονόματα κλάσεων στα στοιχεία και, στη συνέχεια, ορίστε τις κλάσεις CSS στο αρχείο CSS σας.

Εδώ είναι ένα παράδειγμα:

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







exportdefault App;

Σε αυτό το παράδειγμα, ορίζετε α όνομα τάξης για το Κουμπί, Ποπόβερ, και Διάλογος συστατικά. Τώρα μπορείτε να στυλ τα στοιχεία στο αρχείο 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;
}

Αφού καθορίσετε τα στυλ για τα στοιχεία σας, το κουμπί και το popover θα πρέπει να φαίνονται κάπως έτσι.

Εάν δεν θέλετε να ορίσετε ένα έθιμο όνομα τάξης για τα στοιχεία σας, η βιβλιοθήκη React Aria Components περιλαμβάνει μια προεπιλογή όνομα τάξης για κάθε συστατικό. Η προεπιλεγμένη όνομα τάξης είναι react-aria-componentName, που Όνομα συστατικού είναι το όνομα του στοιχείου που θέλετε να δώσετε στυλ.

Για παράδειγμα:

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

Σημειώστε ότι το μπλοκ κώδικα CSS παραπάνω θα εφαρμόσει αυτά τα στυλ σε κάθε Κουμπί, Ποπόβερ, και Διάλογος συστατικό που χρησιμοποιείτε στην εφαρμογή σας.

Δημιουργήστε προσβάσιμες και διαδραστικές εφαρμογές React

Το React Aria Components είναι μια ισχυρή βιβλιοθήκη για τη δημιουργία προσβάσιμων και διαδραστικών εφαρμογών React. Παρέχει στοιχεία που χειρίζονται τις αλληλεπιδράσεις των χρηστών και την προσβασιμότητα σύμφωνα με τις βέλτιστες πρακτικές WAI-ARIA. Αν ψάχνετε για μια βιβλιοθήκη στοιχείων που προσφέρει πολλά στοιχεία και ευελιξία, το React Aria Components είναι μια εξαιρετική επιλογή.

Εκτός από τη βιβλιοθήκη React Aria Components, υπάρχουν και άλλες βιβλιοθήκες μη στιλιστικών στοιχείων που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε όμορφες εφαρμογές React. Μία από αυτές τις βιβλιοθήκες περιλαμβάνει το Radix UI. Το Radix UI είναι μια βιβλιοθήκη στοιχείων χωρίς στυλ για τη δημιουργία εφαρμογών React υψηλής ποιότητας. Είναι μια εξαιρετική εναλλακτική λύση στο React Aria Components.