Icons

http://ionicframework.com/docs/v2/components/#icons Ionic提供了700+个图标。

更多内容请查看API文档。

基本用法

给ion-icon设置name属性：

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

Active/Inactive Icons

所有的图标都有活动、非活动两种状态。活动图标是实心的和粗的，非活动图标是带边框和细的。给isActive属性设置true或false来改变图标的状态。如果不设置这个属性，图标默认是活动的。

<ion-icon name="heart"></ion-icon> <!-- active --> 
<ion-icon name="heart" isActive="false"></ion-icon> <!-- inactive -->

Platform Specific Icons

大多数图标有Material Design和iOS两个版本。Ionic会根据当前运行的平台自动选择正确的版本。

如果要为每个平台明确设置不同的图标，使用md和ios属性来提供相应平台下的图标名字。

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

Variable Icons

可以使用变量来设置图标：

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

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

所有的图标可以查看以下页面： http://ionicframework.com/docs/v2/ionicons/

results matching ""

    No results matching ""