שיעור 16 ב-ionic – הוספת תפריט צד, שימוש ב MenuController

  • הוספת תפריט צד בנוסף לטאבים, היא מהלך מעט מורכב
  • אציין אותו שלב אחר שלב, ולבסוף אביא את הקוד
  • בתוך app.html נוסיף תגית ion-menu, ובתוכו את הכפתורים הרלוונטים.
  • התגית ion-menu צריכה לבוא עם הגדרה שאומרת לה "היכן להחליף את העמודים" , כדי להגדיר זאת
    • נוסיף לתגית ion-nav סימון רגיל של תבנית אנגולר, כלומר למשל #nav
    • ולתגית ion-menu נוסיף הגדרה [content]="nav"
  • כדי לתת מראה אחיד בתוך התפריט, נשתמש בתגית ion-list, כאשר לכל אחד מהכפתורים נוסיף הגדרת ion-item
  • כמובן צריך להוסיף אירוע click לכל אחד מהכפתורים ב app.component.ts
  • כדי לשלוט בתוך האירוע בעמוד שיוצג, שהוא למעשה עמוד ה-root,
    נשאלת השאלה – איך נקבע את עמוד ה-root ?
    הרי בשלב זה , אנחנו בתוך הקומפוננט הראשון, ה- app.html, אז אנחנו עדין לא יכולים להזריק את NavController, כיוון שהוא עדין לא נוצר ( למרות שיש לו דווקא מתודה נחמדה של setRoot שהייתה יכולה לעזור לנו).
    אז כדי לתת פתרון אחר למטרה שלנו להחליף את עמוד ה-root , אנחנו נשתמש בפונקציה של אנגולר שנקראת ViewChild@,  זו שיטה באנגולר שבה אפשר לגשת לתבנית מסויימת, אחרי שהיא נוצרה, במקרה שלנו, אנחנו ניגש לתפריט אחרי שהוא נוצר, ושם כמובן, נוכל לגשת ל-NavController ולהשתמש במתודה שתאפשר לנו  להגדיר את ה-root.
    כלומר זהו פתרון עוקף שיאפשר לנו להשתמש ב-nav controller.
    הפתרון הזה מתואר בדוקמונטציה בקישור הזה.
  • אחרי שהמשתמש לוחץ על כפתור, אזי אנחנו צריכים לסגור את התפריט, לצורך כך נשתמש באובייקט MenuController, ספציפית במתודה שלו close.
  • כדי להוסיף בעמודים השונים (pages) את סימן התפריט, נוסיף כפתור , עם icon מובנה של ionic שנקרא menu.
  • את הכפתור ב-html, כדאי לעטוף בתגית של ionic שמיועדת לסידור של כפתורים בשורה. היא נקראת ion-buttons, ואפשר להוסיף לה את המאפיין start או end כדי להחליט האם הכפתור ישב בצד ימין או שמאל.
  • כדי להקפיץ את התפריט, נזריק לקלאס הרלוונטי את MenuController , ונשתמש במתודה שלו שנקראת open.
  • אך זה יכול להיות מעצבן מאוד, לו נצטרך בכל עמוד להוסיף את הכפתור, וליצור מתודה עבורו, לצורך כך ישנו קיצור דרך : להוסיף לכפתור התפריט את ההגדרה menuToggle . ואז לא צריך ליצור מתודה, ולייבא וכו'…
---- app.html file -----------------

<ion-menu [content]="nav" >
 <ion-header>
 <ion-toolbar>
 <ion-title>Menu</ion-title>
 </ion-toolbar>
 </ion-header>
 <ion-content>
 <ion-list>
 <button (click)="onLoad(tabsPage)" ion-item>
 <ion-icon name="quote" item-left></ion-icon>
 Quotes
 </button>
 <button ion-item (click)="onLoad(settingsPage)">
 <ion-icon name="settings" item-left></ion-icon>
 Settings
 </button>
 </ion-list>
 </ion-content>
</ion-menu>

<ion-nav [root]="tabsPage" #nav ></ion-nav>



------- app.component.ts file ---------------------

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from './../pages/tabs/tabs';
import { SettingsPage } from './../pages/settings/settings';

@Component({
 templateUrl: 'app.html'
})
export class MyApp {
 //rootPage:any = TabsPage;
 tabsPage:any = TabsPage;
 settingsPage:any = SettingsPage;
 @ViewChild('nav') nav:NavController;

 constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen
 ,private mnuCtrl:MenuController) {
 platform.ready().then(() => {
 // Okay, so the platform is ready and our plugins are available.
 // Here you can do any higher level native things you might need.1
 statusBar.styleDefault();
 splashScreen.hide();
 });
 }

 onLoad(page:any) {
 this.nav.setRoot(page);
 this.mnuCtrl.close();
 }
}

--------- בכל דף שבו מעוניינים בתפריט נוסיף משהו דומה -------------


<ion-header>

 <ion-navbar>
 <ion-buttons end >
 <button ion-buton menuToggle >
 <ion-icon name="menu"></ion-icon>
 </button>
 </ion-buttons>
 <ion-title>favorites</ion-title>
 </ion-navbar>

</ion-header>

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *