1.导航：怎么运行的
要从一个页面导航到另一个页面，只需将新页面推入或弹出到堆栈上即可：
（1）push()：导航到新页面
（2）pop():倒退页面
2.UI组件：
1.行动表：
（饿了么点菜的菜单查看或者删除）
import { ActionSheetController } from 'ionic-angular';
2.警报
警报只能用于快速操作，如密码验证，小型应用通知或快速选项。
import { AlertController } from 'ionic-angular'类型：
a.基本警报；
b.提示警报;(提示将被用于询问用户密码)。
c.确认提醒：（删除通讯录）
d.无线电警报（确认警报）
e.复选框警报
3.徽章
向用户传达数值的小组件
<ion-badge item-end>260k</ion-badge>4.纽扣
就是按钮，注意图标按钮可以只有图标没有文本
<!-- Only icon (no text) -->
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button><button ion-button color="secondary">Secondary</button>5.牌
也称为卡片
6.约会时间
DateTime组件用于显示一个界面，方便用户选择日期和时间
<ion-item>
<ion-label>Start Time</ion-label>
<ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</ion-item>7.晶圆厂
FAB（浮动动作按钮）是标准材料设计组件。它们被塑造成一个代表一个促进行动的圆圈。按下时，可能会包含更多的相关操作。FABs的名字表示在固定位置上浮动内容。
<ion-fab right bottom>
<button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
<ion-fab-list side="left">
<button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
<button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
</ion-fab-list>
</ion-fab>tap，press，pan，swipe，rotate，和pinch事件
<ion-card (tap)="tapEvent($event)">
<ion-item>
Tapped: {{tap}} times
</ion-item>
</ion-card>9.格
Ionic的网格系统基于flexbox，
网格系统由12列组成，每个ion-col都可以通过设置col-属性来确定大小。
<ion-grid>
<ion-row>
<ion-col col-12>This column will take 12 columns</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>This column will take 6 columns</ion-col>
</ion-row>
</ion-grid>10.图标
<ion-icon name="heart"></ion-icon><ion-icon ios="logo-apple" md="logo-android"></ion-icon><ion-icon [name]="myIcon"></ion-icon>export class MyFirstPage {
// use the home icon
myIcon: string = "home";
}11.输入
表单中的每个输入字段都有一个Control，一个绑定到该字段中的值的函数，并执行验证。一个控制组是控件的集合。
控制组处理表单提交，并提供可用于确定整个表单是否有效的高级API。
类型：
a.固定内联标签
<ion-label fixed>Username</ion-label>b.浮动标签floating
c.内联标签（ 没有属性值，输入后也不会隐藏）
d.插入标签（通过将inset属性添加到父级ion-list组件来进行输入插入）
e.占位符标签placeholder=“”
f.堆叠标签stacked
12.清单（列表）
列表用于显示信息行，例如联系人列表，播放列表或菜单
13.载入中
加载组件是一个覆盖，可以防止用户在指示活动时进行交互。默认情况下，它显示基于模式的微调。
可以使用微调框传递和显示动态内容。可以隐藏或定制微调框以使用多个预定义的选项。即使在导航期间，载入指示器也会显示在其他内容的顶部
import { LoadingController } from 'ionic-angular';14.菜单
菜单是可以拖出或切换显示的侧面菜单导航。
当菜单关闭时，菜单的内容将被隐藏。
15.情态动词
模式在关闭屏幕上滑动以显示临时UI，通常用于登录或注册页面，消息组合和选项选择
import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';16.导航
导航是用户在应用中不同页面之间移动的方式
类型：
a.基本导航
通过组件进行处理，该组件作为一个简单的堆栈，新的页面被推到并弹出，对应于历史上向前和向后移动。
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})如果您的页面有，则如果不是根页面，则会自动添加后退按钮，导航栏的标题将被更新;
但没有一个NavBar，你可以弹出当前页面的堆栈：
b.从根组件导航
通过添加一个引用变量ion-nav，可以@ViewChild用来获取Nav组件的一个实例，它是一个导航控制器（它扩展NavController）：
@Component({
template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
@ViewChild('myNav') nav
rootPage = TabsPage;
// Wait for the components in MyApp's template to be initialized
// In this case, we are waiting for the Nav identified by
// the template reference variable #myNav
ngAfterViewInit() {
// Let's navigate from TabsPage to Page1
this.nav.push(LoginPage);
}
}c.标签导航
导航可以嵌套在复杂组件（如Tabs）中
17.酥料饼
Popover是一个浮动在应用程序内容之上的视图
常见情形：
（1）显示有关当前视图的更多信息
（2）选择常用的工具或配置
（3）提供在您的一个视图中执行的操作列表
import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';18.无线电:radio-group
像复选框一样，无线电是一个保存布尔值的输入组件。在引擎盖下，收音机与HTML无线电输入没有区别。
然而，像其他离子组件一样，无线电在每个平台上的风格不同。
与复选框不同，无线电组件组成一个组，每次只能选择一个无线电。使用该checked属性设置默认值，该disabled属性可禁用用户更改为该值。
19.范围
范围是一个控件，允许用户通过沿滑杆或轨道移动滑块旋钮从一系列值中进行选择。
<ion-item>
<ion-range [(ngModel)]="brightness">
<ion-icon range-left small name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>20.搜索栏
搜索栏绑定到模型，并在模型更改时发出输入事件。
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>getItems()当输入更改时调用该函数，该更新更新显示的城市。虽然此示例基于搜索输入过滤列表，但是可以在许多不同的场景中使用Searchbar：
21.分割：ion-segment
段是一组按钮显示的行。它们可以作为过滤器，根据段值显示/隐藏元素。
<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
...
</ion-list>
</div><ion-slides pager>
<ion-slide style="background-color: green">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: blue">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>24.标签
Tabs为多标签界面提供了一个Tab Bar和一组可以标签化的视图。
<ion-tabs>
<ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
<ion-tab tabIcon="star" [root]="tab2"></ion-tab>
</ion-tabs>a.要初始化Tabs，请为每个选项卡使用一个小孩
b.个别标签只是 @Components:
import { Component } from '@angular/core';
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Heart</ion-title>
</ion-navbar>
</ion-header>
<ion-content>Tab 1</ion-content>`
})
export class Tab1 {}c.每个标签都有自己的历史堆栈，并NavController instances injected为孩子们@Components每个选项卡的将是唯一的每个选项卡
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
...
})
class Tab1 {
constructor(public navCtrl: NavController) {
// Id is 1, nav refers to Tab1
console.log(this.nav.id)
}
}25.图标和文字
要在选项卡内添加文本和图标，请使用tab-icon和tab-title属性：
要在选项卡内添加图标，请使用该tab-icon属性。该属性可以传递任何图标的名称:
<ion-tabs>
<ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
<ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
<ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
<ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
</ion-tabs>每个都绑定到一个[root]属性，就像上面的导航部分一样。那是因为每个都只是一个导航控制器
26.徽章
要向选项卡添加徽章，请使用tabBadge和tabBadgeStyle属性。该tabBadgeStyle属性可以传递任何颜色的名称
<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>27.烤面包
Toast会在短时间内显示，然后自动关闭
import { ToastController } from 'ionic-angular';
export class MyPage {
constructor(public toastCtrl: ToastController) {
}
presentToast() {
let toast = this.toastCtrl.create({
message: 'User was added successfully',
duration: 3000
});
toast.present();
}
}28.切换
toggle是一个保存布尔值的输入组件。像复选框一样，切换通常用于允许用户切换设置。属性，如value，disabled以及checked可应用于切换来控制其行为。
<ion-item>
<ion-label> Sam</ion-label>
<ion-toggle disabled checked="false"></ion-toggle>
</ion-item>29.工具栏
工具栏是可以在应用程序中用作标题，子标题，页脚或甚至子页脚的通用栏。
由于ion-toolbar是基于flexbox，无论您的页面中有多少工具栏，它们将被正确显示，并ion-content相应地进行调整
a.基本用法
<ion-header>
<ion-toolbar>
<ion-title>Toolbar</ion-title>
</ion-toolbar>
</ion-header>b.改变颜色
c.工具栏中的按钮
按钮可以添加到页眉和页脚工具栏。要向工具栏添加按钮，我们需要先添加一个ion-buttons组件。该组件包装一个或多个按钮，并且可以给予start或end属性来控制其包含的按钮的位置
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>Send To...</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="person-add"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>d.工具栏中的细分
分段是允许用户在不同数据集之间切换的好方法。使用以下标记将段添加到工具栏
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button icon-only>
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-segment>
<ion-segment-button value="new">
New
</ion-segment-button>
<ion-segment-button value="hot">
Hot
</ion-segment-button>
</ion-segment>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>e.工具栏中的搜索栏
在工具栏中包含一个搜索栏。
<ion-header>
<ion-toolbar color="primary">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
