בניית אפליקציות React נגישות עם רכיבי React Aria

React Aria Components היא ספרייה המכילה אוסף של רכיבים לא מעוצבים שנבנו על גבי ווים של React Aria.

הוא פותח על ידי Adobe והוא חלק מפרויקט React Spectrum, שמטרתו ליצור פרויקט מקיף אוסף של ספריות וכלים שעוזרים למפתחים לבנות משתמש אדפטיבי, נגיש וחזק חוויות.

הבנת רכיבי React Aria

תגובה רכיבי אריה מספק נגישות, אינטראקציות עם משתמשים והתנהגות על פי שיטות העבודה המומלצות של WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). בניגוד לספריית React Aria, אשר משתמש בווי React לבנות את הרכיבים שלך.

ספריית React Aria Components מציעה סט של רכיבים מובנים מראש, כולל לחצנים, תיבות סימון, סליידרים וכו'. רכיבים אלה אינם מעוצבים, מה שמאפשר לך לעצב את המראה והתחושה של האפליקציה איך שאתה מתכוון.

יתרונות השימוש ברכיבי React Aria

ספריית React Aria Components מציעה יתרונות רבים, כולל:

• נְגִישׁוּת: רכיבי React Aria פועלים לפי שיטות העבודה המומלצות של WAI-ARIA, ומבטיחות שהאפליקציה שלך נגישה לכל המשתמשים, כולל אלה המשתמשים בטכנולוגיות מסייעות.
instagram viewer
• גְמִישׁוּת: רכיבי React Aria מגיעים ללא סגנון, ומאפשרים לך ליישם את מערכת העיצוב שלך ללא אילוצים.
• אינטראקציות משתמש: React Aria מספק טיפול חזק באינטראקציות של משתמשים, כולל אינטראקציות מקלדת, עכבר ומגע.
• בִּנאוּם: React Aria תומך בשפות מימין לשמאל, עיצוב תאריך ומספרים ועוד, מה שמקל על בניית יישומים בינלאומיים.

בניית אפליקציות React עם רכיבי React Aria

בואו נעבור על בניית אפליקציית React פשוטה באמצעות רכיבי React Aria. לפני השימוש בספריית 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

אתה יכול להתקין את ספריית React Aria Components באמצעות npm או חוט. כדי להתקין אותו באמצעות npm, הפעל את הפקודה הבאה בטרמינל שלך:

npm install react-aria-components

לחלופין, כדי להתקין באמצעות חוט, הפעל את הקוד הזה:

yarn add react-aria-components

כעת לאחר שהתקנת את ספריית React Aria Components, תוכל להשתמש ברכיבים שלה באפליקציה שלך.

שימוש ברכיבי React Aria

ספריית React Aria Components מציעה מגוון רכיבים שהופכים את תהליך הפיתוח לקל ומהיר יותר. כדי להשתמש ברכיב של הספרייה, ייבא אותו לאפליקציה שלך ועבד אותו.

לדוגמה:

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;

בלוק הקוד שלמעלה מייבא את לַחְצָן, פופ-אובר, דיאלוג טריגר, ו דיאלוג רכיבים מה react-aria-components מודול. כל הרכיבים המיובאים יוצרים כפתור פשוט המציג חלון קופץ כאשר לוחצים עליו.

ה דיאלוג טריגר הרכיב שולט בנראות של תיבת דו-שיח או קופץ. בתוך ה דיאלוג טריגר, שם ה לַחְצָן רְכִיב. כפתור זה מפעיל את הנראות של פופ-אובר ו דיאלוג.

ה פופ-אובר רכיב הוא מיכל שצץ מעל שאר ממשק המשתמש, בעוד ה- דיאלוג הרכיב מציג תוכן בשכבה מעל האפליקציה. בתוך ה פופ-אובר הרכיב הוא א דיאלוג רכיב עם הטקסט "לחצת על הכפתור."

לחיצה על הכפתור תציג חלון קופץ עם הטקסט "לחצת על הכפתור" על המסך שלך, ונותן לממשק שלך מראה דומה לתמונה למטה.

כפי שניתן לראות בתמונה למעלה, רכיבי הספרייה מגיעים ללא סגנון כך שתוכלו לבחור את הסגנון המועדף עליכם.

עיצוב הרכיבים שלך

מכיוון שרכיבי React Aria מגיעים ללא סגנון, אתה יכול לעצב אותם איך שאתה רוצה. אתה יכול להשתמש גיליונות סגנון מדורגים (CSS), Tailwind CSS, styled-components, או כל שיטת סטיילינג אחרת שאתה מעדיף.

אתה יכול להעביר מנהגים שונים שמות כיתה לרכיבים ולאחר מכן הגדר את מחלקות ה-CSS בקובץ ה-CSS שלך.

הנה דוגמא:

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;

בדוגמה זו, אתה מגדיר את א className בשביל ה לַחְצָן, פופ-אובר, ו דיאלוג רכיבים. כעת תוכל לסגנן את הרכיבים בקובץ ה-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;
}

לאחר הגדרת הסגנונות עבור הרכיבים שלך, הכפתור והקופץ שלך צריכים להיראות בערך כך.

אם אתה לא רוצה להגדיר מותאם אישית className עבור הרכיבים שלך, ספריית React Aria Components כוללת ברירת מחדל className לכל רכיב. ברירת המחדל className הוא 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. Radix UI היא ספריית רכיבים לא מעוצבת לבניית אפליקציות React באיכות גבוהה. זוהי אלטרנטיבה מצוינת לרכיבי React Aria.