zoukankan      html  css  js  c++  java
  • 6、图标:icon

    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";
     
    }
  • 相关阅读:
    js高级-闭包
    js作用域
    js执行上下文与执行上下文栈
    js原型及原型链
    去除数组中重复的元素值
    树[省选联考2020]
    GDOI2020 游记
    Problem b[HAOI2011]
    分零食[JSOI2012]
    移动金币「SDOI2019」
  • 原文地址:https://www.cnblogs.com/dandingjun/p/5562516.html
Copyright © 2011-2022 走看看