مدخل الى ملحقات الواجهة ( UI Components ) في NativeScript

xlmnxpمنذ 6 سنوات

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

ملحقات واجهة المستخدم ( UI Component ) هي ملحقات واجهة اصلية ( Native ) للجهاز تكون معدة مسبقًا في إطار NativeScript للأستخدام ( مثل الازرار ومستعراض النصوص والحقل النصي ) تساعد للأدخال والاخراج من والى واجهة المستخدم

( UI هو اختصار لـ User Interface ( واجهة المستخم ) )

خصائص مشتركة في جميع الملحقات

id لتعيين معرف للملحق

class لتعيين صنف للملحق

style لتعيين سمة للمحلق

loaded تشغيل دالة بعد الأنتهاء من تحميل العنصر

الملحقات في nativescript

buttonPage.png.8e6f5fc194847e5ac0678e133425c0a6.png

598191308cf05_buttonPage(1).png.e6de58c442ef6e6974eb87af9f6a163e.png

Button زر

labelPage.png.fd6aa38fc5bdcdb32da6b14b22d4a4e4.png

5981913b3ac48_labelPage(1).png.6dcdd0f92871e2c31485d750d96ea32c.png

Label مستعرض نص

textFieldPage.png.40967537659955f2898308947f56db88.png

5981914de7749_textFieldPage(1).png.ae05713123d7bf34c301d224a4671d5c.png

TextField حقل نصي للأدخال

textViewPage.png.0da50d1482f0e83b7c82241d30115ac2.png

598191505eb02_textViewPage(1).png.7de130ee028e6e44d3fc402f212a5573.png

TextView حقل نصي متعدد الاسطر قابل للتمدد للأدخال

searchBarPage.png.114e708e8cb0122c2b0feff7d27cf8c4.png

598191422ce63_searchBarPage(1).png.3c55fdcb811e0e6c51b3d907d39c0ef4.png

SearchBar شريط البحث

switchPage.png.1a0c450457e56fc5f40e4cf3f6b69db4.png

598191472b2bc_switchPage(1).png.15ed7a30c81ed3498524afab7afe99d4.png

Switch مفتاح تبديل ( مشابه للمفتاح الكهربائي ) للتفعيل او الغاء التفعيل

sliderPage.png.ca147466bc069046f0100c24e6e77b65.png

5981914576cfc_sliderPage(1).png.87e1c123bb4a75eb74cdc529dec57ef2.png

Slider منزلق لتحديد بين عدة قيم

progressPage.png.1b2a511d7ecdd61371f715e80109650e.png

5981914058b94_progressPage(1).png.c058e5bbe75c484c737c12cb6eb6e659.png

Progress شريط التقدم شريط يعرض ما بين قيمتين 0 و 100

activityIndicatorPage.png.751722748022afb443d389cbe903bfd5.png

5981912c8eb16_activityIndicatorPage(1).png.82495cbf542ee46bbf4926397a8d13af.png

ActivityIndicator مؤشر انتظار

imagePage.png.93c548643f842f6a7330f7617f45522d.png

598191382e4c8_imagePage(1).png.6c8d1910bd29c5bc48ad64a074079996.png

Image مستعرض صور

listViewPage.png.c7b18554c3d5cd728190a4e384c61aa7.png

5981913e96a29_listViewPage(1).png.82743a1ab8efd5d1878f93ea253d6bb8.png

ListView مستعرض لمصفوفة او لعدة حقول

htmlViewPage.png.7c03564e606fcf54dac205e9cf701d90.png

5981913666cdc_htmlViewPage(1).png.1c71e10a341b8fa883ecf979c6737033.png

HtmlView مستعرض لناتج لشفرة HTML

webViewPage.png.d8250474f7acb4f75558b6e3ae2165d2.png

5981915484050_webViewPage(1).png.2d385f8b8d6f50a4f552903a5115819a.png

WebView مستعرض ويب

tabViewPage.png.338aa9ac2c34d12578fd919b74ba06c3.png

598191491448e_tabViewPage(1).png.0aa60c97b1888687878ed56e1233f54d.png

TabView علامات تبويب لعرض عدة صفحات داخل التطبيق

segmentedBarPage.png.4981b31f92f411f1b51c9944928b123b.png

59819143be4a0_segmentedBarPage(1).png.d7b597308b2e481157f528ca54346c68.png

SegmentedBar شريط ازرار متقسمة

datePickerPage.png.225d314d8f64beb15b4e15a8ee553865.png

59819132b36dd_datePickerPage(1).png.b4949e849157e2484757c8f9cc7c8f68.png

DatePicker لتحديد تاريخ معين من شريط التاريخ

timePickerPage.png.dda11be9c3b9f8d9408b9d946e165a93.png

5981915241397_timePickerPage(1).png.17b38aabee4adc6ab0b163a67c90eacd.png

TimePicker لتحديد وقت معين من شريط الوقت

listPickerPage.png.91a09dd12ebb4a815c7548bc2be5522f.png

5981913cbdadb_listPickerPage(1).png.f75b3fe1096a239da33f40eb2c7cf9bf.png

ListPicker للتحديد نص من مصفوفة نصوص

dialogsPage_confirm.png.64d464a2292469b61520e8aa4076c1c4.png

598191349aa99_dialogsPage_confirm(1).png.ce6248de7f8cdd1c4ae980ffb7d7f736.png

Dialogs نوافذ منبثقة مثل اعلامات ( Alert )

أعجبني تابع شارك الدرس

المحاضر

xlmnxp

تابعني

محتوى الدورة

البداية
1	مدخل الى nativescript
2	تثبيت nativescript cli على جهازك
3	بناء اول مشروع لك بواسطة NativeScript
التخطيطات ( Layouts )
1	مدخل الى التخطيطات ( Layouts ) في NativeScript
2	التخطيط العائم ( AbsoluteLayout )
3	التخطيط الرصيفي ( DockLayout )
4	التخطيط الشبكي ( GridLayout )
5	التخطيط المكدس ( StackLayout )
6	التخطيط الدوراني ( WrapLayout )
7	التخطيط المرن ( FlexboxLayout )
ملحقات واجهة المستخدم ( UI Components )
1	مدخل الى ملحقات الواجهة ( UI Components ) في NativeScript الدرس الحالي
2	الملحقات (Components): Label و Button و TextView و TextField
3	الملحقات (Components): SearchBar و Switch
4	الملحقات (Components): Progress و Slider
5	الملحقات (Components): ActivityIndicator و Image
6	الملحقات (Components): ListView و HtmlView و WebView
7	الملحقات (Components): TabView و SegmentedBar
8	الملحقات (Components): DatePicker و TimePicker و ListPicker
9	الملحق ( Component ): Dialogs