How to do it...

Here are the instructions to create example app:

  1. Create a new MenuTabsSegment app using the tabs template, as shown, and go into the MenuTabsSegment folder:
$ ionic start MenuTabsSegment tabs
$ cd MenuTabsSegment 
  1. Edit ./src/app/app.html with the following code:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuToggle>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>
  1. Edit ./src/app/pages/about/about.ts with the following code:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
seg:string = "flame";
constructor(public navCtrl: NavController) {

}

}
  1. Edit ./src/app/pages/about/about.html with the following code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-segment [(ngModel)]="seg" color="danger">
<ion-segment-button value="flame">
<ion-icon name="flame"></ion-icon>
</ion-segment-button>
<ion-segment-button value="leaf">
<ion-icon name="leaf"></ion-icon>
</ion-segment-button>
</ion-segment>

<div *ngIf="seg === 'flame'">
<ion-card>
<ion-card-header>
Flame
</ion-card-header>
<ion-card-content>
A flame (from Latin flamma) is the visible, gaseous part of
a fire. It is caused by a highly exothermic reaction taking place in
a thin zone.
</ion-card-content>
</ion-card>
</div>

<div *ngIf="seg === 'leaf'">
<ion-card>
<ion-card-header>
Leaf
</ion-card-header>
<ion-card-content>
A leaf is an organ of a vascular plant and is the principal
lateral appendage of the stem.
</ion-card-content>
</ion-card>
</div>
</ion-content>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.80.3