الملحقات (Components): TabView و SegmentedBar
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الملحق TabView
يوفر ملحق مستعرض علامات التبويب ( أو TabView ) طريقة بسيطة للتنقل بين والجهات المختلفة عن طريق النقر على بعض علامات التبويب أو عن طريق تمرير بين والجهات ( بالسحب من اليمين الى اليسار او من اليسار الى اليمين ).
افتراضيا سوف يقوم ملحق مستعرض علامات التبويب ( أو TabView ) بتحميل واجهة علامة التبويب الأولى، ومع ذلك فمن الممكن جعل ملحق مستعرض علامات التبويب ( أو TabView ) يقوم بتحميل علامة تبويب اخرى عند بدء تشغيل التطبيق من خلال تحديدها بالخاصية selectedIndex.
خصائص الملحق مستعرض علامات التبويب ( TabView )
"automatic" | "alwaysOriginal" | "alwaysTemplate"
"bottom" في الأسفل | "top" في الأعلى
خصائص عناصر الملحق مستعرض علامات تبويب ( TabView )
العنصر TabViewItem
تقبل اسم ملف او 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>
الناتج
الملحق 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;
الناتج
محتوى الدورة
عن الدرس
2 إعجاب |
1 متابع |
0 مشاركة |
3000 مشاهدات |
منذ 6 سنوات |
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !