Browse Source

Bug fixes

Matt Raible 7 years ago
parent
commit
4726d65884
2 changed files with 39 additions and 2 deletions
  1. 39
    2
      TUTORIAL.md
  2. BIN
      static/good-beers-ui.png

+ 39
- 2
TUTORIAL.md View File

@@ -382,8 +382,7 @@ Modify `beer.html` to
382 382
 </ion-content>
383 383
 ```
384 384
 
385
-
386
-Modify `beer.ts` to
385
+Modify `beer.ts` to be
387 386
 
388 387
 ```typescript
389 388
 import { Component } from '@angular/core';
@@ -408,6 +407,44 @@ export class BeerPage {
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 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 450
 ```typescript

BIN
static/good-beers-ui.png View File