تمنحك هذه المكتبة مكونات نظيفة وقابلة للتوسيع يمكنك استخدامها في تطبيقك وتطويرها بشكل أكبر.

Radix UI هي مكتبة مكونات منخفضة المستوى وغير منظمة ويمكن الوصول إليها لبناء واجهات ويب عالية الجودة وسهلة الاستخدام. يمكنك استخدامه مع React لإنشاء تطبيقات بمكونات كاملة الميزات يمكنك تصميمها بسهولة لتناسب تصميمك.

ما هو Radix UI؟

Radix UI عبارة عن مجموعة من مكونات واجهة المستخدم البدائية وغير المصممة والتي يمكن الوصول إليها لتطبيقات React. يوفر اللبنات الأساسية التي تحتاجها لإنشاء نظام التصميم الخاص بك.

الهدف الرئيسي لـ Radix UI هو توفير مجموعة من مكونات الأداة المساعدة منخفضة المستوى التي تساعدك على بناء مكونات قابلة لإعادة الاستخدام. تأتي المكونات غير منظمة بشكل افتراضي ، مما يعني أن لديك سيطرة كاملة على تصميمها.

إعداد تطبيق React الخاص بك

يجب عليك إعداد تطبيق React لاستخدام Radix UI. للقيام بذلك ، يجب أن يكون لديك Node.js و npm ، مدير حزم العقدة ، مثبتًا على جهاز الكمبيوتر الخاص بك.

مع تثبيت هذه العناصر ، يمكنك إنشاء تطبيق React جديد باستخدام هذا الأمر الطرفي:

npm init vite

سيقوم هذا الأمر بتهيئة Vite. Vite هي أداة سريعة الإنشاء تتيح لك إنشاء تطبيقات ويب حديثة بسرعة. أنت تستطيع

instagram viewer
استخدم Vite لإنشاء تطبيق React الخاص بك.

بعد تشغيل الأمر أعلاه ، سوف تجيب على سلسلة من المطالبات لتهيئة تطبيق React الخاص بك. قم بإنشاء تطبيق React ، وقم بتسميته جذر- واجهة المستخدم- التطبيق، وتأكد من أنها تستخدم لغة TypeScript.

بعد ذلك ، أدخل الدليل الجذر لتطبيقك الجديد وقم بتثبيت التبعيات الضرورية:

cd radix-ui-app
npm install

تطبيق React الخاص بك جاهز الآن.

تثبيت Radix UI

Radix UI هو مكتبة مكونة كبيرةy التي يمكنك استخدامها لإنشاء تطبيقات React يمكن الوصول إليها. يتيح لك تثبيت كل مكون على حدة كحزمة منفصلة. ستحدد اسم المكون في الأمر لتثبيته.

على سبيل المثال:

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

سيؤدي هذا إلى تثبيت مكون القائمة المنسدلة Radix UI. يحتوي Radix UI على العديد من المكونات الأخرى التي يمكنك تثبيتها حسب احتياجاتك.

بناء التطبيق الخاص بك باستخدام Radix UI

الآن بعد أن قمت بتثبيت مكون القائمة المنسدلة من Radix UI ، يمكنك إنشاء قائمة منسدلة بسيطة باستخدام Radix UI. للقيام بذلك ، ستقوم أولاً باستيراد المكونات الضرورية من مكون القائمة المنسدلة لـ Radix UI.

إليك مثال يوضح كيف يمكنك إنشاء قائمة منسدلة بسيطة باستخدام 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 / رد فعل القائمة المنسدلة الحزمة كما القائمة المنسدلة. ثم يستخدم هذه المكونات لإنشاء قائمة منسدلة داخل ملف شعبة عنصر.

ال القائمة المنسدلة. جذر هو المكون الأساسي للقائمة المنسدلة. يجب عليك دمج جميع مكونات القائمة المنسدلة الأخرى داخل هذا المكون. يمكنك تحديد مشغل القائمة المنسدلة باستخدام ملف القائمة المنسدلة. مشغل عنصر. في هذه الحالة ، يكون المشغل هو ملف زر عنصر بنص "انقر فوقي". عند النقر فوق الزر ، ستظهر القائمة المنسدلة.

مع ال القائمة المنسدلة. محتوى المكون ، يمكنك تحديد محتوى القائمة المنسدلة و القائمة المنسدلة. مجموعة يمثل المكون مجموعة من عناصر القائمة ذات الصلة. أنت تستخدم ملف القائمة المنسدلة. غرض لتحديد العناصر الفردية من القائمة المنسدلة.

في هذا المثال ، هناك نوعان من القائمة المنسدلة. مكونات المجموعة ، كل منها يحتوي على قائمة منسدلة واحدة. مكون العنصر. يتم تغليف جميع هذه المكونات في قائمة منسدلة. مكون المحتوى.

سيؤدي عرض كتلة التعليمات البرمجية أعلاه إلى تعديل واجهتك لتبدو كما يلي:

كما ترى ، تفتقر النتائج إلى أي نمط ، لذا ستحتاج إلى إضافة CSS الخاص بك بعد ذلك.

تصميم مكونات Radix UI الخاصة بك

تتمثل إحدى مزايا Radix UI في أنها لا تفرض أي تصميم على مكوناتك. هذا يعني أن لديك سيطرة كاملة على تصميم المكون الخاص بك. يمكنك تصميم مكوناتك باستخدام مكتبات CSS-in-JS مثل المكونات المصممة والعاطفة ، أو يمكنك استخدام CSS التقليدية.

فيما يلي مثال على كيفية تصميم مكونات Radix UI الخاصة بك باستخدام CSS التقليدي:

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





"trigger">


exportdefault App;

يضيف هذا المثال ملف اسم الطبقة دعم ل زر عنصر القائمة المنسدلة. مشغل، ال القائمة المنسدلة. محتوى، و ال القائمة المنسدلة. غرض عناصر.

بعد تطبيق الفئات ، يمكنك بعد ذلك تصميم المكونات باستخدام 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 UI أيضًا أيقونات React ، بحيث يمكنك إضافة رموز إلى تطبيقك لتجميله أكثر. ابدأ بتثبيت حزمة أيقونات Radix UI:

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;

يضيف هذا المثال ملف همبرغر و PlusIcon للتطبيق. الأول موجود داخل مكون زر ، والأخير يزيد الأول اسقاط. غرض عنصر.

بعد ذلك ، قم بتحديث ملف .غرض فئة في ملف CSS الخاص بك:

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

الآن يجب أن يبدو التطبيق الخاص بك مثل هذا.

بناء تطبيق رد فعل الجودة باستخدام Radix UI

Radix UI هي أداة قوية لبناء تطبيقات React. يوفر مجموعة من المكونات منخفضة المستوى وغير المصممة والتي يمكن الوصول إليها والتي يمكنك استخدامها كوحدات بناء لتطبيقك.

باستخدام Radix UI ، يمكنك التركيز على وظائف التطبيق الخاص بك دون القلق بشأن التعقيدات الأساسية لواجهة المستخدم. سواء كنت مطورًا متمرسًا أو مبتدئًا ، يمكن لـ Radix UI مساعدتك في إنشاء واجهات ويب عالية الجودة وسهلة الاستخدام.