1.图标

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

}

2.输入

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

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

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

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

3.清单（列表）

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

4.载入中

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

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

import { LoadingController } from 'ionic-angular';

constructor(public loadingCtrl: LoadingController) {

this.loading = this.loadingCtrl.create({

spinner: 'bubbles',

content: '加载中'

});

}

5.菜单

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

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

6.popover

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

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

 let popover = this.popoverCtrl.create('GameDetailPage',{item:item});

 popover.present();

7.分割：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>

8.tabs图标和文字

要在选项卡内添加文本和图标，请使用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>

项目开发组   供稿