آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک

3 سال پیش

آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک خواهیم پرداخت.

تب ها الگوی مفیدی برای هر نوع پیمایش یا انتخاب صفحات مختلف در داخل برنامه شما هستند. همین تب ها در بالای صفحه برای دستگاه های اندروید و در پایین برای دستگاه های IOS ظاهر می شوند.

استفاده از تب ها

تب ها را می توان با استفاده از زبانه های یونی به عنوان یک عنصر ظرف و یون زبانه به عنوان یک عنصر محتوا به برنامه اضافه کرد. ما آن را به index.html اضافه خواهیم کرد ، اما شما می توانید آن را به هر فایل HTML داخل برنامه خود اضافه کنید. فقط مطمئن شوید که برای جلوگیری از مشکلات CSS همراه با آن ، آن را به ion-content اضافه نکنید.

index.html Code

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

خروجی مطابق تصویر زیر نشان داده خواهد شد.

Ionic Javascript Tabs

برای عناصر API ،ion-tab موجود است. می توانید آن را به عنوان ویژگی هایی که در مثال بالا نشان داده شده است ، اضافه کنید ، جایی که ما از عنوان، آیکون روشن و خاموش کردن استفاده کردیم. دو مورد آخر برای تمایز تب انتخاب شده از بقیه آن استفاده می شود. اگر به تصویر بالا نگاه کنید ، می بینید که اولین تب انتخاب شده است. می توانید بقیه ویژگی ها را در جدول زیر بررسی کنید.

ویژگی های تب

ویژگی	نوع	جزئیات
title	string	عنوان تب
href	string	لینک مورد استفاده برای پیمایش تب
icon	string	آیکون تب
icon-on	string	آیکون تب وقتی که انتخاب می شود
icon-off	string	آیکون تب وقتی که انتخاب نمی شود
badge	expression	نشان برای تب
badge-style	expression	استایل نشان برای تب
on-select	expression	فراخوانی شود وقتی که تب انتخاب می شود
on-deselect	expression	فراخوانی شود وقتی که تب لغو انتخاب می شود
hidden	expression	برای مخفی کردن تب
disabled	expression	برای غیر فعال کردن تب

تب ها همچنین دارای خدمات نمایندگی خاص خود برای کنترل راحت بیشتر همه تب های داخل برنامه هستند.

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

نویسنده مطلب erfan molaei

آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک

آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از تب ها

index.html Code

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش تب های جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از تب ها

index.html Code

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه