这里可以看到运行 ionic start 创建脚手架的时候可以指定一个模板。如清单 7 中的 tabs。这里的模板分为两种，代表了 ionic 默认提供的两种全局导航方式，tabs 和 menu。
tabs 布局提供了 app 下方的导航。如图 2 的 home，about 的几个选项；menu 布局提供了左边的滑动菜单，点击按钮，会出现滑动选项，如图 3。
图 2. 底部的 tabs 布局方式
图 3. 侧边栏的 menu 布局方式
这里提供实现 menu 逻辑布局的代码，如清单 8，需要在控制器中注入 MenuController。
清单 8. Menu 布局的控制器逻辑样例
import { Component } from '@angular/core';
import {MenuController, NavController} from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, menu: MenuController) {
menu.enable(true);
}
}
清单 9. Menu 布局的前端显示样例
<ion-header>
<ion-navbar>
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
Menus
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block menuToggle>Toggle Menu</button>
</ion-content>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(homePage)">
Home
</button>
<button ion-item (click)="openPage(friendsPage)">
Friends
</button>
<button ion-item (click)="openPage(eventsPage)">
Events
</button>
<button ion-item (click)="closeMenu()">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content></ion-nav>
页面布局元素
回到单个的页面布局，ionic 提供 header 和 content 两块。每块都可能包含多个元素，并且支持 grid 布局。Grid 类似于 bootstrap 前端布局的方式，它会把页面分为 12 格，可以使用 col-x 标明一个元素在页面中占格的区域。这里给出一个 List 元素在 grid 布局下的应用代码。如清单 10，采用了两个 col-6 把页面分为两列，它生成的样式如图 4。