组件介绍
1、打开ionic官网 https://ionicframework.com/
2、点开components，里面会出现原有的组件（以后项目开发过程中还会自定义组件）
3、介绍部分组件（Grid、Modals、Badges、FABs、Segment）
--grid：栅栏布局
--modals：弹窗
--badges：卡片
--FABs：比较新颖的快速导航
--segment：选项卡（导航）
下面是简单介绍几个组件，在最后我会详细讲解一个组件的使用
Grid
网格系统由12列组成，每个ion-col都可以通过设置col-width属性来确定大小。
基本用法：
This column will take 12 columns
This column will take 6 columns
Modals
模式在关闭屏幕上滑动以显示临时UI，通常用于登录或注册页面，消息组合和选项选择。
注：一般做成弹窗。
基本用法：
import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';
export class MyPage {
constructor(public modalCtrl: ModalController) {
}
presentModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
}
Badges
Badges是通常向用户传达数值的小组件。它们通常用在一个项目中。
基本用法：
Followers
260k
也可以给出任何颜色属性：
FABs
FAB（浮动动作按钮）是标准材料设计组件。它们被塑造成一个代表一个促进行动的圆圈。按下时，可能会包含更多的相关动作。FABs的名字表示在固定位置上浮动内容。
基本用法：
Ionic Component Documentation
Segment
Segment是一组按钮显示的行。它们可以作为过滤器，根据段值显示/隐藏元素。
注：类似导航。
基本用法：
Ionic Component Documentation
详细讲解Segment
1、打开ionic官网：https://ionicframework.com/
2、点开Explore the docs，进到文档
3、点开components,里面找到Segment组件，点击Demo Source进到github上的源码
4、点开pages.ts，将缺少的可以自己拷贝到自己的某个页面ts中。
（1）首先这里import指的是导入ionic库中的某个类库，如果同属于一个ionic库这个时候可以放在一起，格式比如：import { NavController,AlertController,Platform,ModalController } from 'ionic-angular';
（2）然后是在class中先声明，比如这里的
pet: string = "puppies";
isAndroid: boolean = false;
constructor小括号中放的是将类库初始化，自己命名，花括号中进行函数等的调用。
5、最后在template.html中自己缺失的部分拷贝到自己的html中。
Puppies
Kittens
Ducklings
1、这里[(ngModel)]="pet"指的是ts页面中初始化的值，也就是刚进入到页面的是哪个选项；
2、 ion-segment-button value="puppies"，这里的value值对应下面的页面，因为每个选项都是对应不同的页面的，这里通过value值来绑定。
...
...
...
...
...
...
这里[ngSwitch]="pet"对应的是上面的导航的初始化页面；
ion-list*ngSwitchCase="'ducklings'" 中的*ngSwitchCase分别对应导航每个导航的value值.
问题：
1、ionic3对于资源的管理必须放在assets文件夹中，其他地方不能识别；
2、在ts文件中写函数，需要调用库中的类库时，在constructor初始化时必须加上类型（public、private等）