ionic3学习笔记

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>

简单按钮，可以添加不同属性进行加强:如small/large、outline、full/block/clear/round/

<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>

类型：a、active和inactive状态b.平台特定图标要指定要用于每个平台的图标，请使用**md和ios**属性，并提供平台特定的图标名称。

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

c.可变图标要使用变量设置图标：

<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>