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

xlmnxpمنذ 6 سنوات

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

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

 

الملحق TabView

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

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

 

598191491448e_tabViewPage(1).png.0aa60c97b1888687878ed56e1233f54d.pngtabViewPage.png.338aa9ac2c34d12578fd919b74ba06c3.png

 

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

selectedIndex تحديد التبويبة التي سوف يتم تحميلها عند بدء التطبيق.
selectedIndexChange تشغيل دالة عندما ينتقل المستخدم من تبويبة الى اخرى.
selectedColor تحديد لون التبويبة المحددة.
iosIconRenderingMode تحديد طريقة رسم الأيقونة في نظام iOS
"automatic" | "alwaysOriginal" | "alwaysTemplate"
androidTabsPosition تحديد موقع مسعرض علامات التبويب لنظام الاندرويد ( Android )
"bottom" في الأسفل | "top" في الأعلى

 

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

العنصر TabViewItem

title عنوان التبويبة
iconSource ايقونة التبويبة
تقبل اسم ملف او resource id ( معرف الملف في مجلد Resources )

 

طريقة كتابة ملحق مستعرض علامات التبويب ( 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>

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

 

tabview.gif.c6f74415688f401c9892590b330ee5b0.gif

 

الملحق SegmentedBar

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

 

59819143be4a0_segmentedBarPage(1).png.d7b597308b2e481157f528ca54346c68.pngsegmentedBarPage.png.4981b31f92f411f1b51c9944928b123b.png

 

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

selectedIndex تحديد التبويبة التي سوف يتم تحميلها عند بدء التطبيق.
selectedIndexChange تشغيل دالة عندما ينتقل المستخدم من تبويبة الى اخرى.

 

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

العنصر SegmentedBarItem

title عنوان التبويبة

 

طريقة كتابة الملحق 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;

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

SegmentedBar.gif.b4a1d71d640ad1441d6721899c4e88d6.gif

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

سليمان:

رائع

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

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