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

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

מהו ממשק המשתמש של Radix?

Radix UI הוא אוסף של רכיבי ממשק משתמש פרימיטיביים, לא מעוצבים, נגישים עבור יישומי React. הוא מספק את אבני הבניין שאתה צריך כדי ליצור את מערכת העיצוב שלך.

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

הגדרת אפליקציית React שלך

עליך להגדיר אפליקציית React כדי להשתמש בממשק המשתמש של Radix. כדי לעשות זאת, עליך להיות בעל Node.js ו npm, מנהל חבילות הצומת, מותקן במחשב שלך.

כאשר אלה מותקנים, אתה יכול ליצור אפליקציית React חדשה עם פקודת הטרמינל הזו:

npm init vite

פקודה זו תאתחל את Vite. Vite הוא כלי לבנייה מהירה המאפשר לך ליצור יישומי אינטרנט מודרניים במהירות. אתה יכול השתמש ב-Vite כדי ליצור את אפליקציית React שלך.

instagram viewer

לאחר הפעלת הפקודה לעיל, תענה על סדרה של הנחיות להגדרת אפליקציית React שלך. צור אפליקציית React, שם לה radix-ui-app, וודא שהוא משתמש בשפת TypeScript.

לאחר מכן, הזן את ספריית השורש של האפליקציה החדשה שלך והתקן את התלות הנדרשת:

cd radix-ui-app
npm install

אפליקציית React שלך מוכנה כעת.

התקנת ממשק המשתמש של Radix

ממשק המשתמש של Radix הוא ספריית רכיבים נהדרתy שבו אתה יכול להשתמש כדי ליצור אפליקציות React נגישות. זה מאפשר לך להתקין כל רכיב בנפרד כחבילה נפרדת. תציין את שם הרכיב בפקודה שלך כדי להתקין אותו.

לדוגמה:

npm install @radix-ui/react-dropdown-menu

פעולה זו תתקין את רכיב התפריט הנפתח של Radix UI. ל- Radix UI יש רכיבים רבים אחרים שתוכל להתקין בהתאם לצרכים שלך.

בניית האפליקציה שלך באמצעות ממשק המשתמש של Radix

כעת, לאחר שהתקנת את רכיב התפריט הנפתח מממשק Radix, אתה יכול לבנות תפריט נפתח פשוט באמצעות Radix UI. לשם כך, תחילה תייבא את הרכיבים הדרושים מרכיב התפריט הנפתח של ממשק המשתמש של Radix.

הנה דוגמה שמראה כיצד אתה יכול לבנות תפריט נפתח פשוט באמצעות Radix:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (













New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>




More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}
exportdefault App;

קוד זה מייבא את כל הרכיבים מה- @radix-ui/react-dropdown-menu חבילה כמו תפריט נפתח. לאחר מכן הוא משתמש ברכיבים אלה כדי ליצור תפריט נפתח בתוך div אֵלֵמֶנט.

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

עם ה תפריט נפתח. תוֹכֶן רכיב, אתה מגדיר את תוכן התפריט הנפתח ואת תפריט נפתח. קְבוּצָה הרכיב מייצג קבוצה של פריטי תפריט קשורים. אתה משתמש ב- תפריט נפתח. פריט רכיב להגדרת פריטים בודדים בתפריט הנפתח.

בדוגמה זו, ישנם שני DropdownMenu. רכיבי קבוצה, שכל אחד מהם מכיל DropdownMenu יחיד. רכיב פריט. רכיבים אלה כולם עטופים בתפריט Dropdown. רכיב תוכן.

עיבוד בלוק הקוד למעלה ישנה את הממשק שלך כך שיראה כך:

כפי שאתה יכול לראות, התוצאות חסרות כל סטיילינג, אז תצטרך להוסיף CSS משלך בשלב הבא.

עיצוב רכיבי ממשק המשתמש של Radix

אחד היתרונות של ממשק המשתמש של Radix הוא שהוא לא כופה שום סטיילינג על הרכיבים שלך. זה אומר שיש לך שליטה מלאה על הסגנון של הרכיב שלך. אתה יכול לסגנן את הרכיבים שלך באמצעות ספריות CSS-in-JS כמו רכיבי סגנון ורגש, או שאתה יכול להשתמש ב-CSS מסורתי.

להלן דוגמה כיצד לעצב את רכיבי ממשק המשתמש של Radix באמצעות CSS מסורתי:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (





"trigger">


exportdefault App;

דוגמה זו מוסיפה את ה className תמיכה ל לַחְצָן אלמנט, ה תפריט נפתח. הדק, ה תפריט נפתח. תוֹכֶן, וה תפריט נפתח. פריט רכיבים.

לאחר החלת השיעורים, תוכל לעצב את הרכיבים באמצעות CSS:

.button {
padding: 0.7rem 0.8rem;
border: none;
border-radius: 12px;
background-color: #333333;
color: #f2f2f2;
}
.trigger {
border: none;
}


.content {
margin: 1rem;
padding: 0.7rem;
background-color: #FFFFFF;
color: #333333;
border-radius: 7px;
}


.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
}
.item:hover {
background-color: #333333;
color: lightgray;
}

בלוק הקוד שלמעלה יחיל את הסגנונות המוגדרים על הרכיבים למראה אטרקטיבי יותר:

ממשק המשתמש של Radix מציע גם React Icons, כך שתוכל להוסיף אייקונים לאפליקציה שלך כדי לייפות אותה עוד קצת. התחל על ידי התקנת חבילת הסמלים של ממשק המשתמש של Radix:

npm install @radix-ui/react-icons

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

לדוגמה:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon, PlusIcon } from"@radix-ui/react-icons";
functionApp() {
return (





"trigger">


exportdefault App;

דוגמה זו מוסיפה את ה HamburgerMenuIcon ו PlusIcon לאפליקציה. הראשון נמצא בתוך רכיב כפתור, והשני מגדיל את הראשון להפיל. פריט רְכִיב.

לאחר מכן, עדכן את ה .פריט מחלקה בקובץ ה-CSS שלך:

.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
display: flex;
gap: 1rem;
}

כעת היישום שלך אמור להיראות כך.

בניית אפליקציה איכותית של React באמצעות ממשק המשתמש של Radix

Radix UI הוא כלי רב עוצמה לבניית אפליקציות React. הוא מספק קבוצה של רכיבים נגישים ברמה נמוכה, לא מעוצבים, שבהם אתה יכול להשתמש כאבני הבניין עבור היישום שלך.

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