一、Ionic组件之Icons:

<ion-icon name="heart" color="primary"></ion-icon>
<ion-icon name="heart" isActive="false"></ion-icon>
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
<ion-icon [name]="myIcon"></ion-icon>

//ts
myIcon:string="home";

Ionic官方图标库:http://ionicframework.com/docs/ionicons/ 

二、Ionic组件之Inputs:

//fixed
<ion-list>
   <ion-item>
       <ion-label fixed>Username</ion-label>
       <ion-input type="text" value=""></ion-input>
   </ion-item>
   <ion-item>
       <ion-label fixed>Password</ion-label>
       <ion-input type="password"></ion-input>
   </ion-item>
</ion-list>

//floating
<ion-list>
   <ion-item>
       <ion-label floating>Username</ion-label>
       <ion-input type="text" value=""></ion-input>
   </ion-item>
   <ion-item>
       <ion-label floating>Password</ion-label>
       <ion-input type="password"></ion-input>
   </ion-item>
</ion-list>

//inset
<ion-list inset>
   <ion-item>
       <ion-label>Username</ion-label>
       <ion-input type="text"></ion-input>
   </ion-item>
   <ion-item>
       <ion-label>Password</ion-label>
       <ion-input type="password"></ion-input>
   </ion-item>
</ion-list>

//stacked
<ion-list>
   <ion-item>
       <ion-label stacked>Username</ion-label>
       <ion-input type="text"></ion-input>
   </ion-item>
   <ion-item>
       <ion-label stacked>Password</ion-label>
       <ion-input type="password"></ion-input>
   </ion-item>
</ion-list>


上一篇:Ionic组件之Grid

下一篇:Ionic组件之lists