الملحقات (Components): Progress و Slider

xlmnxpمنذ 6 سنوات

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

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

شرح الملحق المنزلق ( Slider ) وملحق شريط التقدم ( Progress )

slider-image.png.a1bd5c337b4ec6dabcd317c851a899b2.png

progress-image.png.6cfdf6c5290086f5288e0be414d25870.png

 

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

maxValue اعلى قيمة في المنزلق و شريط التقدم
value للحصول على القيمة ( موقع شريط التقدم او المنزلق ) او تعينها
valueChange تشغيل دالة عند تغيير قيمة المنزلق او شريط التقدم
color لون المزلق و شريط التقدم
backgroundColor لون خلفية شريط المنزلق ولون خلفية شريط التقدم

 

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

minValue اقل قيمة في المنزلق


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

ملف main-page.xml


<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <Page.actionBar>
        <ActionBar title="عالم البرمجة - مفتاح التبديل"></ActionBar>
    </Page.actionBar>
    <StackLayout style="padding: 20px">
        <Progress maxValue="100" color="orange" backgroundColor="red" value="{{ Value }}" />
        <Progress maxValue="100" value="{{ Value }}" />
        <Slider minValue="0" color="green" backgroundColor="black" maxValue="100" value="{{ Value }}" />
        <Slider minValue="50" maxValue="150" value="{{ Value }}" />
    </StackLayout>
</Page>

ملف main-page.js


var Observable = require("data/observable").Observable;
var page;
// إنشاء الـ Observable
var viewModel = new Observable(); 
function onNavigatingTo(args) {
    page = args.object;
    // تعريف الـ Observable ـ Value واسناد له قيمة
    viewModel.Value = 0;

    // ربط الـ Observable بالصفحة
    page.bindingContext = viewModel;
}

exports.onNavigatingTo = onNavigatingTo;

الناتج

 

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

598f34873b26f_sliderprogress.gif.284976e03efdb5975ba217665fa05e99.gif

 

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

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

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