الملحقات (Components): Label و Button و TextView و TextField

xlmnxpمنذ 6 سنوات

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

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

شرح الملحقات الأربعة التالية

Label, Button, TextView, TextField

 

الخصائص المشتركة بينهم

text للحصول على النص أو تعيينه.
style لتعيين خصائص CSS مخصصة له وحدة
id لتعيين تعريف للملحق
textAlignment لمحاذات النص
"initial" | "left" | "center" | "right"
textDecoration الخط الذي تحت النص
"none" | "underline" | "line-through" | "underline line-through"
textTransform لتحول النص ( جميع الحروف صغيرة او كبيرة )
"initial" | "none" | "capitalize" | "uppercase" | "lowercase"
whiteSpace المسافات البيضاء بين الحروف
"initial" | "normal" | "nowrap" | رقم لتحديد المسافة
isEnabled حالة تفعيل للملحق ( الكل ما عدا Label )

 

خصائص الملحق Label

textWrap السماح للنص بالألتفاف على السطور ( الصفوف )


خصائص الملحق Button

tap تشغيل دالة عند النقر على الزر


خصائص الملحقان TextView و TextField المشتركة

hint نص للتوضيح
editable قابلية الحقل لتعديل النص الذي بداخلة
true | false
keyboardType نوع لوحة المفاتيح
datetime | phone | number | url | email
returnKeyType نوع زر الرجوع ( مثل "ارسال" , "رجوع" , "اذهب" )
done | next | go | search | send
returnPress تشغيل دالة عند الضغط على زر الرجوع في لوحة المفاتيح
secure حماية الحقل ( حقل مشفر )
true | false
textChange تشغيل دالة عندما يتغير النص
autocorrect التصحيح التلقائي للنص
true | false


مثال على الملحقات


<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout>
        <Button text="مرحبًا" tap="{{ hello }}"/>
        <TextView text="مرحبًا بالعالم" editable="false" />
        <TextView hint="عالم البرمجة" editable="true" />
        <TextView hint="عالم البرمجة" text="دورة nativescript" editable="true" />
        <TextField text="السلام عليكم ورحمة الله وبركاته"></TextField>
        <TextField hint="ادخل رقم الجوال الخاص بك" keyboardType="phone"></TextField>
        <TextField hint="ادخل كلمة السر" secure="true"></TextField>
        <Label text="الدرس الحادي عشر 11"></Label>
    </StackLayout>
</Page>

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

nativescript.gif.99791e43dde05967718e817825b4ce1a.gif

 

التعليقات (1)

yasmeen mohamed:

حابة اسأل هو مفيش غير ال components دى ؟ حاجه زى ال card view مثلا تتعمل ازاى ؟ اى كمبوننت custom يتكريت ازاى ؟

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !