Matt Raible vor 7 Jahren
Ursprung
Commit
4726d65884
2 geänderte Dateien mit 39 neuen und 2 gelöschten Zeilen
  1. 39
    2
      TUTORIAL.md
  2. BIN
      static/good-beers-ui.png

+ 39
- 2
TUTORIAL.md Datei anzeigen

382
 </ion-content>
382
 </ion-content>
383
 ```
383
 ```
384
 
384
 
385
-
386
-Modify `beer.ts` to
385
+Modify `beer.ts` to be
387
 
386
 
388
 ```typescript
387
 ```typescript
389
 import { Component } from '@angular/core';
388
 import { Component } from '@angular/core';
408
 }
407
 }
409
 ```
408
 ```
410
 
409
 
410
+To expose this page on the tab bar, add it to `tabs.ts`
411
+
412
+```typescript
413
+import { Component } from '@angular/core';
414
+
415
+import { HomePage } from '../home/home';
416
+import { AboutPage } from '../about/about';
417
+import { ContactPage } from '../contact/contact';
418
+import { BeerPage } from '../beer/beer';
419
+
420
+@Component({
421
+  templateUrl: 'tabs.html'
422
+})
423
+export class TabsPage {
424
+  // this tells the tabs component which Pages
425
+  // should be each tab's root Page
426
+  tab1Root: any = HomePage;
427
+  tab2Root: any = BeerPage;
428
+  tab3Root: any = ContactPage;
429
+  tab4Root: any = AboutPage;
430
+
431
+  constructor() {
432
+
433
+  }
434
+}
435
+```
436
+
437
+Update `tabs.html` too!
438
+
439
+```html
440
+<ion-tabs>
441
+  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
442
+  <ion-tab [root]="tab2Root" tabTitle="Beer" tabIcon="beer"></ion-tab>
443
+  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
444
+  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
445
+</ion-tabs>
446
+```
447
+
411
 Add some fun with Giphy! Run `ionic generate provider giphy-service`. Replace the code in `src/providers/giphy-service.ts` with the following TypeScript:
448
 Add some fun with Giphy! Run `ionic generate provider giphy-service`. Replace the code in `src/providers/giphy-service.ts` with the following TypeScript:
412
 
449
 
413
 ```typescript
450
 ```typescript

BIN
static/good-beers-ui.png Datei anzeigen