الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

مجموعة من مكونات React الجميلة لتطوير تطبيقات Chayns®.

تثبيت

أولاً ، يجب عليك تثبيت حزمة chayns-components في مشروعك: 

 # Yarn
yarn add chayns-components

# NPM
npm install chayns-components

يتم توفير الأنماط على مكوناتنا عبر مكتبة chayns-css وبعض المكونات تعتمد أيضًا على API chayns-js ، لذلك يجب عليك تضمينها في HTML: 

 <!-- CSS styles -->
< script
  src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
  version =" 4.2 "
> </ script >

<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script >

نظرة عامة على المكونات

المكونات التالية هي جزء من هذه الحزمة:

عنصر وصف
الأكورديون › الأكورديون عبارة عن أقسام قابلة للطي التي يتم تبديلها من خلال التفاعل مع رأس مرئي بشكل دائم.
كمية مونترول › ComeControl هو عنصر تحكم ثلاثي القطاعات يستخدم لزيادة أو تقليل قيمة تدريجية.
animationWrapper › توفر الرسوم المتحركة wrapper الرسوم المتحركة الأولية لافتة للنظر لأطفالها.
شارة › الشارات صغيرة ، حاويات دائرية تستخدم لتزيين المكونات الأخرى مع معلومات قابلة للتهديد.
فقاعة › فقاعة عائمة تستخدم في المقام الأول لتشغيل مكونات ContextMenu وملعد Tooltip .
زر > أزرار تبدأ الإجراءات ، ويمكن أن تتضمن عنوانًا أو رمزًا ويأتي مع مجموعة من الأنماط المحددة مسبقًا.
تقويم > تقويم الشبكة التفاعلية التي يمكن أن تسليط الضوء على التواريخ المحددة.
مربع الاختيار › تتيح مربعات الاختيار للمستخدمين إكمال المهام التي تتضمن اتخاذ خيارات مثل اختيار الخيارات. يمكن تصميمها كتبديل ، تبديل بصري بين حالتين حصريتين للطرفين - وإيقاف تشغيله.
Colorpicker › يتيح للمستخدم اختيار لون للنص والأشكال وأدوات العلامات والعناصر الأخرى.
ColorScheme › يعدل نظام الألوان لجميع مكونات الطفل.
combobox › زر مع منسدلة تحتوي على قائمة قابلة للتمرير من القيم المتميزة التي يمكن للأشخاص اختيارها.
ContextMenu › يتيح للأشخاص الوصول إلى وظائف إضافية تتعلق بالعناصر التي تظهر على الشاشة دون تشوش الواجهة.
DateInfo › تنسيقات تاريخ أو نطاق تاريخ يمكن قراءته بسهولة ويكشف عن التاريخ المطلق عند التحويم.
الرموز التعبيرية › إدخال نص يسمح بوضع الرموز التعبيرية.
expensableContent › قسم قابل للطي يكشف عن أطفاله مع انتقال الارتفاع.
FileInput › يقبل أنواع الملفات المحددة عبر مربع الحوار أو السحب والإفلات.
filterbutton › مكون يشبه الرقاقة يستخدم لتصفية القوائم. عادة ما تستخدم في مجموعة من 2 أو أكثر.
formattedInput › إدخال النص الذي ينسق تلقائيا إدخاله مع التنسيق. نظرًا لأن هذا المكون يعتمد على المكون Input ، فإنه يأخذ أيًا من الدعائم Input ، والتي لم يتم سردها هنا. يعمل هذا المكون فقط كمكون غير خاضع للرقابة ، مما يعني أنه لا يأخذ value -Prop.
معرض › معرض صور يعرض ما يصل إلى أربع صور بشكل افتراضي. يدعم أيضًا إعادة ترتيب الصور وحذفها ومعاينات الصور غير الواضحة للصور المحملة من tsimg.cloud .
أيقونة › يعرض أيقونة حلوة.
ImageAccordion › الأكورديون الذي له صورة كبيرة ويظهر في شبكة. يجب استخدامها داخل ImageAccordionGroup .
ImageAccordionGroup › مجموعات العديد من مكونات ImageAccordion معًا ، لذلك يمكن فتح واحد منها فقط في وقت واحد.
مدخل > إدخال نص يمكن التحقق منه وزينه بتصميمات مختلفة.
قائمة > Wrapper لـ ListItem -Component لإنشاء قوائم.
ListItem › العناصر في قائمة لعرض البيانات ذات الصلة بتنسيق منظم. يجب استخدامها داخل مكون List .
أوقات الافتتاح › مدخلات لأوقات الافتتاح.
personfinder › البحث عن الإكمال التلقائي عن الأشخاص الذين يمكن تخصيصهم للعمل مع البيانات التعسفية.
الموضع › إدخال الموقع مع خريطة وإدخال نص. يتطلب ذلك خرائط Google JavaScript API مع تمكين مكتبة الأماكن. يمكنك العثور على مزيد من المعلومات حول MAPS API هنا.
ProgressBar › شريط التقدم المتحرك الذي يمكن أن يعرض تقدمًا في الإجراءات أو حالة غير محددة مثل الدوار الذي يتم تحميله.
Radiobutton › زر الراديو الذي يسمح بتحديد أحد الخيارات المتعددة.
rfidinput › مكون لاتخاذ إشارة RFID.
Scrollview › حاوية قابلة للتمرير مع شريط تمرير مخصص يبدو رائعًا على كل جهاز.
SearchBox › إدخال إكمال تلقائي للبحث من خلال قائمة الإدخالات.
Selectbutton › زر اختيار يفتح مربع حوار تحديد عند النقر عليه.
SelectItem › زر الراديو الذي يوسع محتواه عند تحديده. يجب استخدامها داخل SelectList .
Selectlist › قائمة عمودية من أزرار الراديو التي تكشف المحتوى عند تحديدها.
setupwizard › مجموعة من الخطوات التي يتعين على المستخدم أن يمر بها بالتتابع.
setupwizarditem › عنصر يمثل خطوة واحدة في SetupWizard .
SharingBar › قائمة سياق لمشاركة رابط وبعض النصوص على منصات مختلفة.
إمضاء > مكون للسماح للمستخدم بالاشتراك
شريط التمرير › مسار أفقي مع إبهام يمكن نقله بين الحد الأدنى والقيمة القصوى.
Sliderbutton › مجموعة خطية من الأزرار التي هي متبادلة.
smallwaitcursor › مؤشر تحميل دائري صغير.
تاجينرب › إدخال نص يسمح بتجميع القيم كعلامات.
Textarea › إدخال نص متعدد الأفران يمكن أن ينمو تلقائيًا مع محتواه.
TECSTSTRING › يحمل سلاسل النص من قاعدة البيانات الخاصة بنا ويعرضها. يعالج البدائل وتغيير السلسلة عبر CTRL + Click (داخلي فقط).
Tooltip › يلف مكون الطفل ويعرض رسالة عندما يتم تحوم الطفل أو النقر عليه. يسمح بإظهار ضرورية عن طريق الاتصال .show() أو .hide() على مرجعه.
التحقق ›

وظائف الأداة المساعدة

نقدم أيضًا مجموعة من وظائف الأداة المساعدة الشائعة:

وظيفة وصف
ImageUpload وظيفة لتحميل الصور إلى tsimg.cloud
istoBitemplorEee احصل على المعلومات إذا كان المستخدم موظفًا في Tobit
createlinks ينشئ سلسلة مع روابط من سلسلة مع عناوين URL
removeHTML يزيل علامات HTML من سلسلة
colorutils وظائف الأداة المساعدة لتحويل قيم الألوان (Hex ، RGB ، HSV)
التعادل وظائف الأداة المساعدة لتحديد عرض عناصر HTML

المساهمة

إذا كنت ترغب في المساهمة في chayns-components ، تحقق من ملف المساهمة.

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