美文网首页
ion-icon tabIcon 使用自定义图片

ion-icon tabIcon 使用自定义图片

作者: Siam | 来源:发表于2016-12-18 21:20 被阅读246次

    ion-icon使用自定义图片

    系统已经提供了很多icon图标,见http://ionicframework.com/docs/v2/ionicons/
    但是如果使用自己的图片,按照以下的方式,在********全局********SASS文件里加入:

    .ion-${platform}-${iconName} {
       content: '${imagePath}'
    }
    

    上例中,

    • ${platform}替换成对应的iosmd
    • ${iconName}图片的名称,对应的是ion-icon标签里的name属性
    • ${imagePath}即图片的名称
      使用起来就比较简单了,跟使用系统原生的一样,name属性赋值上例中的${iconName}

    ion-tab使用自定义图片

    未选中状态下:

    .ion-${platform}-${iconName} {
       content: '${imagePath}'
    }
    

    选中状态下:

    .ion-${platform}-${iconName}-outline {
       content: '${imagePath}'
       // 其它的一些属性设置
    }
    

    使用的时候,tabIcon属性直接赋值上面命名的${iconName}
    ------修改于2016.12.20
    发现在android环境下,-outline无效,参照网上的资料,经验证如下方案可行:
    未选中状态:

    .ion-md-${iconName} {
       content: '${normalImagePath}'
    }
    

    选中状态需要加到 .tabs-md .tab-button[aria-selected=true]下,如:

    .tabs-md .tab-button[aria-selected=true] {
      .ion-md-${iconName} {
         content: '${selectedImagePath}'
      }
    }
    

    其它的也一样,加进去即可,不需要添加-outline

    相关文章

      网友评论

          本文标题:ion-icon tabIcon 使用自定义图片

          本文链接:https://www.haomeiwen.com/subject/nhszmttx.html