الملحقات (Components): TabView و SegmentedBar

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

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

الملحق TabView

يوفر ملحق مستعرض علامات التبويب ( أو TabView )  طريقة بسيطة للتنقل بين والجهات المختلفة عن طريق النقر على بعض علامات التبويب أو عن طريق تمرير بين والجهات ( بالسحب من اليمين الى اليسار او من اليسار الى اليمين ).

افتراضيا سوف يقوم ملحق مستعرض علامات التبويب ( أو TabView )  بتحميل واجهة علامة التبويب الأولى، ومع ذلك فمن الممكن جعل ملحق مستعرض علامات التبويب ( أو TabView )  يقوم بتحميل علامة تبويب اخرى عند بدء تشغيل التطبيق من خلال تحديدها بالخاصية selectedIndex.

خصائص الملحق مستعرض علامات التبويب ( TabView )

خصائص عناصر الملحق مستعرض علامات تبويب ( TabView )

العنصر TabViewItem

طريقة كتابة ملحق مستعرض علامات التبويب ( TabView )

تقوم بكتابة الوسم TabView وبداخلة تقوم بإضافة التبويبات بالوسم TabViewItem ( مع إضافة عنوان التبويبة بالخاصية title )

وبادخل التبويبة تقوم بإضافة الملحقات.

تنبيه: يجب إضافة العنصر مستقل عن الـ Layouts بحيث لا يكون يسبقة اي Layout

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

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
    <ActionBar title="TabView - التبويبات"></ActionBar>

    <TabView>
        <TabViewItem title="التبويب 1">
                <Label text="مرحبًا بك في التبويبة 1" />
        </TabViewItem>
        <TabViewItem title="التبويب 2">
                <Label text="مرحبًا بك في التبويبة 2" />
        </TabViewItem>
    </TabView>
</Page>

الناتج

الملحق SegmentedBar

يوفر ملحق شريط ازرار متقسمة ( أو SegmentedBar ) طريقة بسيطة لتحديد مجموعة من الآراء المبوبة.

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

خصائص عناصر الملحق SegmentedBar

العنصر SegmentedBarItem

طريقة كتابة الملحق SegmentedBar

تقريبًا مشابه لطريقة كتابة ملحق TabView 

تقوم بكتابة الوسم SegmentedBar وبداخلة تقوم بإضافة الأزرار بالوسم SegmentedBarItem ( مع إضافة عنوان الزر بالخاصية Title )

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

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
    <ActionBar title="SegmentedBar - شريط ازرار متقسمة"></ActionBar>

    <StackLayout>
        <SegmentedBar selectedIndex="{{ observableSelectedIndex }}">
            <SegmentedBarItem title="عنصر 1" />
            <SegmentedBarItem title="عنصر 2" />
            <SegmentedBarItem title="عنصر 3" />
        </SegmentedBar>

        <Label text="{{ 'العنصر المحدد هو: ' + observableSelectedIndex }} " textWrap="true" />
        
    </StackLayout>
</Page>

main-page.js

var Observable = require("data/observable").Observable;
var viewModel = new Observable();

function onNavigatingTo(args) {
    var page = args.object;
    viewModel.observableSelectedIndex = 1;

    page.bindingContext = viewModel;
}

exports.onNavigatingTo = onNavigatingTo;

الناتج