码迷,mamicode.com
首页 > 其他好文 > 详细

6、图标:icon

时间:2016-06-06 06:48:41      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

1、图标

/* ---html----*/
 
<ion-content text-center class="icons-basic-page">
 
  <ion-row>
    <ion-col><ion-icon name=‘ionic‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘logo-angular‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘ionitron‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘heart‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘apps‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘happy‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘people‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘person‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘contact‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘lock‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘key‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘unlock‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘map‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘navigate‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘pin‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘mic‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘musical-notes‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘volume-up‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘cafe‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘calculator‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘bus‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘camera‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘cube‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘image‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘star‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘wine‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘pin‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘arrow-back‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘arrow-dropdown‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘arrow-forward‘></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=‘sunny‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘umbrella‘></ion-icon></ion-col>
    <ion-col><ion-icon name=‘rainy‘></ion-icon></ion-col>
  </ion-row>
 
</ion-content>
 
/* ---html----*/

技术分享

当然可以使用 平台特定 图标
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
是 ios 的时候显示 ios的图标 , 别的则显示 Android的图标
 
变量的图标: 使用一个变量设置一个图标:
<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {
 
  myIcon: string = "home";
 
}

 

 

6、图标:icon

标签:

原文地址:http://www.cnblogs.com/dandingjun/p/5562516.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!