الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

أنشئ تطبيقات React سهلة الوصول وبسرعة ⚡️



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

جدول المحتويات

  • ؟ التوثيق
  • سمات
  • ؟ تثبيت
  • الاستخدام
  • قوالب CodeSandbox
  • قوالب create-react-app
  • المساهمة
  • ؟ يدعم
  • ؟ الشهادات
  • ؟ الجوائز والإشارات
  • المساهمين
  • ⚖️ الترخيص

التوثيق

إنه موقع https://chakra-ui.com للحصول على أحدث إصدار من Chakra UI. للإصدارات الأقدم توجه إلى هنا

  • الإصدار 2: https://v2.chakra-ui.com
  • الإصدار 1: https://v1.chakra-ui.com
  • الإصدار 0: https://v0.chakra-ui.com

سمات

  • سهولة التصميم: تحتوي واجهة Chakra UI على مجموعة من مكونات التخطيط مثل Box و Stack التي تجعل من السهل تصميم مكوناتك عن طريق تمرير الدعائم. يتعلم أكثر
  • مرنة وقابلة للتركيب: تم ​​تصميم مكونات Chakra UI أعلى واجهة React UI البدائية من أجل قابلية تركيب لا نهاية لها.
  • يمكن الوصول إليها. تتبع مكونات Chakra UI مواصفات إرشادات WAI-ARIA ولها سمات aria-* الصحيحة.
  • الوضع المظلم؟: معظم المكونات في Chakra UI متوافقة مع الوضع المظلم.

تثبيت

لاستخدام مكونات Chakra UI، كل ما عليك فعله هو تثبيت حزمة @chakra-ui/react وتبعياتها: 

 # with Yarn
$ yarn add @chakra-ui/react @emotion/react

# with npm
$ npm i @chakra-ui/react @emotion/react

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react

# with Bun
$ bun add @chakra-ui/react @emotion/react

الاستخدام

للبدء في استخدام المكونات، يرجى اتباع الخطوات التالية:

  1. اختتم طلبك باستخدام ChakraProvider المقدم من @chakra-ui/react .
{children} }" style=";text-align:right;direction:rtl">
 import { ChakraProvider , defaultSystem } from "@chakra-ui/react"

// Do this at the root of your application
function App ( { children } ) {
  return < ChakraProvider value = { defaultSystem } > { children } < / ChakraProvider >
}

اختياريًا، يمكنك تغليف تطبيقك باستخدام ColorModeProvider حتى تتمكن من التبديل بين الوضع الفاتح والداكن داخل تطبيقك.

  1. الآن يمكنك البدء في استخدام مكونات مثل ذلك!:
I just consumed some ⚡️Chakra! }" style=";text-align:right;direction:rtl">
 import { Button } from "@chakra-ui/react"

function Example ( ) {
  return < Button > I just consumed some ⚡️Chakra! < / Button >
}

المزيد من الأدلة حول كيفية البدء متوفرة هنا

قوالب CodeSandbox

  • كاتب جافا سكريبت: https://codesandbox.io/s/chakra-ui-javascript-lzzg9
  • كاتب الآلة الكاتبة: https://codesandbox.io/s/chakra-ui-typescript-pomi8
  • NextJS TypeScript Starter: https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

قوالب create-react-app

راجع دليلنا للحصول على معلومات حول كيفية استخدام قوالب create-react-app الرسمية الخاصة بنا.

المساهمة

هل تشعر بالرغبة في المساهمة؟ هذا رائع! لدينا دليل مساهم للمساعدة في إرشادك.

يعيش موقع المستندات الخاص بنا في ريبو منفصل. إذا كنت مهتمًا بالمساهمة في التوثيق، فراجع دليل المساهمة في موقع docsite.

دعم واجهة المستخدم شقرا

المنظمات

ادعم هذا المشروع مع مؤسستك. سيظهر شعارك هنا مع رابط لموقعك على الويب. [يساهم]

فرادى

من خلال التبرع بمبلغ 5 دولارات أو أكثر، يمكنك دعم التطوير المستمر لهذا المشروع. سوف نقدر بعض الدعم. شكرا لجميع داعمينا! [يساهم]

الشهادات

يرمي الناس علي بانتظام مكتبات مكونات React وأنظمة التصميم. قد يكون هذا أفضل ما رأيته. واجهات برمجة التطبيقات بسيطة ولكنها قابلة للتركيب، كما أن إمكانية الوصول إلى المكونات القليلة التي بحثت عنها كاملة.

عمل رائع @thesegunadebayo، عمل ملهم حقًا. - ريان فلورنس

مكتبة مكونات جديدة مفتوحة المصدر رائعة من @thesegunadebayo. أشياء مثيرة للإعجاب حقا! - كولم تويت

هذا عمل لا يصدق. عمل مذهل سيجون! - لي روبنسون

شقرا واجهة المستخدم مجيدة! أحب الاستخدام المتسق لتصميم التركيز والرسوم المتحركة الدقيقة – Guillermo ▲

الجوائز والإشارات

لقد شعرنا بالتواضع الشديد لتلقي الجوائز والإشادات من المجتمع على كل الابتكارات والوصول إلى Chakra UI الذي جلبته إلى نظام JavaScript البيئي.

الحل يستحق المتابعة

رادار التكنولوجيا (2020-2021)

المساهمة الأكثر تأثيرا في المجتمع

جوائز المصادر المفتوحة (2020)

المساهمين

الشكر يذهب إلى هؤلاء الناس الرائعين


سيجون أديبايو
؟ ؟
تيولواني كولاوولي
؟
ديفانش جثمالاني

أدريان الكسندر

لي

كريستوف بودوسزلو
؟ ؟
جاستن هول

مارك تشاندلر
️ ؟
فولاساد أغباجي
؟
كريستيان نوامبا

جوناثان باكيبوا
؟
اليكس لونج
؟
جيسكو ووستر

دوريس المتربة

أليكس لوبيرا

توماسو دي روسي

أودي

هندريك نيمان

مات روتنبرغ

لويس فيليبي زاغويني

جان

تيميتوب أجيبوي

جوناثان كيم

كريس طومسون

والتر كيمارو

جاك ليزلي

كين لورين داجانيو

رامون

جيس
؟
اييليجون كايود مايكل

تال ويليامز

تريفور بليدز
؟
جورد ليا

أجيلوس أرفانيتاكيس

دوغلاس غابرييل

مارتن نوردستروم

داني تاتوم

سيمون كولينز

سانتي ألبو

بيلو7980

إيشيموتو كوجي

جيف ون

بابلو سايز

نيجك رافنيك

جوليان فيالا

سيباستيان تريبوناك

آدم بلانت

لوسيو روبنز

جيسون ميازجا

جونزالو بوزو

مسيحي
؟
كريستيان هاجندورن

أندري كراسنوف

دوني سوكاردي

منغ

غابرييل بيلواردو

فرانسوا بيست

تيانشي هي

ستيفن

بابتيست أدريان

روب بيفان

توماسز

شكرا

ديفيد ويبل

نافين

فنسنت

أسامة الدويس

فريد ك. شوت

جاريد بالمر

أوستن واليلا

توني نارلوك

توماس ماكسيميني

ديفيد بومغولد

رالفيليوس

راهول رانجنيكار

بيير نيل

بيير جريمود

ويسب للبحث والتطوير

ماكينا سموتز
؟
نيلسون ريتز

محمد ننار

مصطفى تورهان

كيم روين

جاستن ماك

جيريمي ديفيس

جيريمي لو

إيفان دالميت
؟
ديلون كاري

معرف الوظيفة

denkigai

آرون آدامز

عبد العزيز أديشينا

ساندرو

بريمكومار شانموغام

توبياس ميكسنر

جيريمي لوبلانك

كلفن أوجينيرهورو

ديفيد ج. فيليكس

برودي ماكي

لكل سفينسون

باتريك كيسون

إيفو إيليتش

أفانيش تريباثي

باليبيباس

نافين مورثي

تيم كيندبرج

يودار

ماو يوفينغ

بنغ جي

جيمس جي
️
انطون

دامجان لوكوفيتش

ستانيلا أندريه

إيكونولا حزقيال

بن ميتشينسون

جيس تيلفورد

سيمو ألكسندروف

هيريكليس إيمانويل

كودينكات

سام داوسون
؟
hy2k

بيير أورتيجا

كيرم سيفينجان

harveyhalwin

منصور بن يوسف

أندرو جاريسون

كارلوس رودريجيز

دوايت واتسون

ChasinHues

ناهويل جريكو
؟ ؟
بابلو روشا

داستن لاريمر
؟
جوليانو فارياس

جو بيل
؟
هينينج بوهلماير

سيفيرت شو أولسن

أندريه لازاريسكو

خوسيه تيكسيرا
؟
أدريانو ريسندي

فيكتور باستوس

فنسنت

كانديس
؟ ؟
ديف بومان

تيم كولبيرجر
؟
ستيفان منساه
؟
com.iskanderbroere

دومينيك سومر

بافيل "ستراجك" دوليشيك

كيشاف بوهرا

okezieuc

كلايتون فاريا

أندرو إليس
؟
جويل جالانت
؟
جايا كريشنا نامبورو

إيفوما إيموه

جيسون أدكيسون
؟
غوتييه رودارو
؟
توم دوهال

سام مارجاليت
؟
ماركوس وود

سبنسر دوبال

جاكوب أريولا

كينلي جان

دينيس موريلو
؟
عمر جورا

زيكلوتروب-ي

هونغ سوك وو

جونهو يو

توماس سيلر
️
صموئيل كوفمان

جوزيف ميكولاش

جواو فيكتور

يويشيرو ميامي

جيفا إريانتو
؟
يوزي
️

com.songheewon

براسانا فينكاتيش TS

anthowm

أسامة الأحمرو
؟
دانان ويجايا

اليكثير
؟
شوبهام كوشال

بيتر ساثر موين

هيرمان نيجارد

com.jnmsl

محمد سيد

سام بودر

دومينيك لي

فراس العودة
؟

جي بي أنغاريتي

إنديكا إنتكسورتيتا

مات ويلز

أنانت جاين

توم تشين
؟
إرني ميراندا

bjoluc

سوجيت برادان

أبهيشيك كاشياب

كريستيان دياكوفيتش

انطونيو ماجالهايس

جريكو نبراس
؟
إمالبرت

mcha
️

حسيب حسن

جيمي رولفس
؟
سورابي غوبتا

نينجارو
؟
موناي

واد مكدانيل

جوردون جولدباخ

بهيش

أميلكار مونوز

سمر موهان

جواو باولو رودريجيز

أفيري فريمان

دانييل شولتز
؟ ؟
مايكل كيلبان

ngxCoder

كريستوفر جيلتفيت سيلبيك

يوهان اهلرز

لوكاس باخ

لازار نيكولوف
؟
ايواتا
؟
لي سيونغ تشان

com.pomSense

كن طالبا

تاتسويا إيتاكورا
؟
يوكو كوتاني
؟
فاديم ديميدس

(مفتاح الرموز التعبيرية):

يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!

الاختبار مدعوم من

رخصة

معهد ماساتشوستس للتكنولوجيا © سيجون أديبايو

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل