ionic

转载自https://blog.csdn.net/kassiaaaa/article/details/78332769

1.导航：怎么运行的

要从一个页面导航到另一个页面，只需将新页面推入或弹出到堆栈上即可：
（1）push()：导航到新页面
（2）pop():倒退页面

2.UI组件：

1.行动表：
（饿了么点菜的菜单查看或者删除）
import { ActionSheetController } from 'ionic-angular';
2.警报
警报只能用于快速操作，如密码验证，小型应用通知或快速选项。

 import { AlertController } from 'ionic-angular'
   
   
1

类型：
a.基本警报；
b.提示警报;(提示将被用于询问用户密码)。
c.确认提醒：（删除通讯录）
d.无线电警报（确认警报）
e.复选框警报

3.徽章

向用户传达数值的小组件

<ion-badge item-end>260k</ion-badge>
   
   
1

4.纽扣

就是按钮，注意图标按钮可以只有图标没有文本

<!-- Only icon (no text) -->
<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>
   
   
1
2
3
4

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

<button ion-button color="secondary">Secondary</button>
   
   
1

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>
   
   
1
2
3
4

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>
   
   
1
2
3
4
5
6
7
8
9

tap，press，pan，swipe，rotate，和pinch事件

<ion-card (tap)="tapEvent($event)">
  <ion-item>
    Tapped: {{tap}} times
  </ion-item>
</ion-card>
   
   
1
2
3
4
5

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>
   
   
1
2
3
4
5
6
7
8

10.图标

<ion-icon name="heart"></ion-icon>
   
   
1

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

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

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

<ion-icon [name]="myIcon"></ion-icon>
   
   
1

export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}
   
   
1
2
3
4

11.输入

表单中的每个输入字段都有一个Control，一个绑定到该字段中的值的函数，并执行验证。一个控制组是控件的集合。

控制组处理表单提交，并提供可用于确定整个表单是否有效的高级API。
类型：
a.固定内联标签

 <ion-label fixed>Username</ion-label>
   
   
1

b.浮动标签floating
c.内联标签（ 没有属性值，输入后也不会隐藏）
d.插入标签（通过将inset属性添加到父级ion-list组件来进行输入插入）
e.占位符标签placeholder=“”
f.堆叠标签stacked

12.清单（列表）

列表用于显示信息行，例如联系人列表，播放列表或菜单

13.载入中

加载组件是一个覆盖，可以防止用户在指示活动时进行交互。默认情况下，它显示基于模式的微调。

可以使用微调框传递和显示动态内容。可以隐藏或定制微调框以使用多个预定义的选项。即使在导航期间，载入指示器也会显示在其他内容的顶部

import { LoadingController } from 'ionic-angular';
   
   
1

14.菜单

菜单是可以拖出或切换显示的侧面菜单导航。

当菜单关闭时，菜单的内容将被隐藏。

15.情态动词

模式在关闭屏幕上滑动以显示临时UI，通常用于登录或注册页面，消息组合和选项选择

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';
   
   
1
2

16.导航

导航是用户在应用中不同页面之间移动的方式

类型：
a.基本导航

通过组件进行处理，该组件作为一个简单的堆栈，新的页面被推到并弹出，对应于历史上向前和向后移动。

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
   
   
1
2
3

如果您的页面有，则如果不是根页面，则会自动添加后退按钮，导航栏的标题将被更新;
但没有一个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);
  }
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

c.标签导航

导航可以嵌套在复杂组件（如Tabs）中

17.酥料饼

Popover是一个浮动在应用程序内容之上的视图
常见情形：
（1）显示有关当前视图的更多信息
（2）选择常用的工具或配置
（3）提供在您的一个视图中执行的操作列表

import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';
   
   
1
2

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>
   
   
1
2
3
4
5
6

20.搜索栏

搜索栏绑定到模型，并在模型更改时发出输入事件。

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>
   
   
1
2
3
4
5
6

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>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

24.标签

Tabs为多标签界面提供了一个Tab Bar和一组可以标签化的视图。

<ion-tabs>
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
    </ion-tabs>
   
   
1
2
3
4

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 {}
   
   
1
2
3
4
5
6
7
8
9
10
11
12

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)
  }
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12

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>
   
   
1
2
3
4
5
6

每个都绑定到一个[root]属性，就像上面的导航部分一样。那是因为每个都只是一个导航控制器

26.徽章

要向选项卡添加徽章，请使用tabBadge和tabBadgeStyle属性。该tabBadgeStyle属性可以传递任何颜色的名称

<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
   
   
1

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();
  }
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

28.切换

toggle是一个保存布尔值的输入组件。像复选框一样，切换通常用于允许用户切换设置。属性，如value，disabled以及checked可应用于切换来控制其行为。

<ion-item>
  <ion-label> Sam</ion-label>
  <ion-toggle disabled checked="false"></ion-toggle>
</ion-item>
   
   
1
2
3
4

29.工具栏

工具栏是可以在应用程序中用作标题，子标题，页脚或甚至子页脚的通用栏。

由于ion-toolbar是基于flexbox，无论您的页面中有多少工具栏，它们将被正确显示，并ion-content相应地进行调整

a.基本用法

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
</ion-header>
   
   
1
2
3
4
5

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>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

e.工具栏中的搜索栏

在工具栏中包含一个搜索栏。

<ion-header> 

  <ion-toolbar color="primary"> 

    <ion-searchbar (input)="getItems($event)"></ion-searchbar> 

  </ion-toolbar> 

</ion-header>
   
   
1
2
3
4
5