ארכיון תגיות: mobile

שיעור 10 ב- ionic, שימוש בטאבים \ תפריט צד (המבורגר)

הסבר תיאורטי על המנגנון של טאבים ב-ionic.

  • כמו שבניווט "רגיל" של ionic, אנחנו מנהלים מערך של דפים.
  • גם בטאבים ובתפריט צד, אנחנו מנהלים מספר מערכים של דפים.
  • כל טאב – מייצג מערך של דפים נפרד.
  • אז כאשר יש לנו דף של טאבים, הוא מכיל למעשה מקום מסויים, שבו מוצג הדף העיקרי. וכל לחיצה, מחליפה את הדף העיקרי, בתוך הדף של הטאבים. זאת אומרת שהדף של הטאבים הוא העוטף.

המחשה – עמוד טאבים ב-Ionic.

הקוד של העמוד הבא, הוא קוד רגיל של angular component, כאשר יש בתוך התבנית תגית של ion-tabs ובתוכה 2 טאבים.

שימו לב אל ההגדרות של כל טאב :

  • ההגדרה [root] – מביאה את הדף מתוך משתנה שמופיע במחלקה.
  • ההגדרה tabTitle – קובעת את הטקסט שיופיע על הטאב
  • ההגדרה tabIcon קובעת את האיקון שיופיע, כאשר הוא נלקח מספרית האיקונים של ionic.

צריך לזכור כמובן להוסיף את העמוד אל app.module.ts, וגם להגדיר בתוך app.component.html , את העמוד בתור ה-root של האפליקציה.

 

import { Component } from '@angular/core';
import { FavoritesPage } from './../favorites/favorites';
import { LibraryPage } from './../library/library';

@Component({
 selector:'page-tabs',
 template:`
 <ion-tabs>
 <ion-tab [root]="favoritesPage" tabTitle="מועדפים" tabIcon="star"></ion-tab>
 <ion-tab [root]="libraryPage" tabTitle="ספריה" tabIcon="book"></ion-tab>
 </ion-tabs>
 `
})
export class TabsPage{

 favoritesPage = FavoritesPage;
 libraryPage = LibraryPage;
}

מהו הטאב הראשון שנטען ? – זהו פשוט הטאב שמופיע ראשון בקוד.

אפשר לשנות זאת באמצעות המאפיין selectedIndex שמופיע בדוקומנטציה.