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

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

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

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

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

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

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

ملف 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;

الناتج