在Ionic中设置平台特定图标

Question

好吧,所以这可能是一个非常简单的问题,我会感到羞怯,但我刚刚开始使用Ionic,我只是在玩带有图标的UI细节.

我的问题是你是否可以在一个元素中设置图标并根据你构建的平台对它们进行不同的渲染？

例如,我有一个像这样的菜单项

<ion-content scroll="false">
  <ul class="list">
    <li class="item"><a href="#/login"><i class="icon ion-locked">Login</a></li> 
  </ul> 
</ion-content>

在Ionicons中,ion-lockedandroid(ion-android-locked)和ios(ion-ios-locked)都有一个图标,我想知道是否有一种方法可以在构建过程中设置图标以匹配他们的平台？

可能只是因为我最终在git中有单独的分支,但是如果有一个简单的方法来实现它,我宁愿不这样做？

Answer 1

您可以自定义scss文件.

看看你的平台资产,index.html有一个类

class ="platform-android platform-cordova platform-webview"

//default
.your-search{
  @extend .ion-android-search;
}
.platform-android {
  .your-search{
    @extend .ion-android-search;
  }
}

.platform-ios {
  .your-search {
    @extend .ion-ios7-search;
  }
}

Answer 2

由于Ionic Framework是基于Apache Cordova构建的,因此您可以使用Apache Cordova Device插件,该插件标配新项目:

https://github.com/apache/cordova-plugin-device/blob/master/doc/index.md

然后你可以做这样的事情:

yourApp.controller("ExampleController", function($scope) {
   $scope.devicePlatform = device.platform;
});

然后在HTML中,您可以引用控制器并根据平台显示图标:

<i ng-if="devicePlatform === 'Android' class="icon ion-android-locked">
<i ng-if="devicePlatform !== 'Android' class="icon ion-ios-locked">

注意ng-if.取决于$ scope.devicePlatform将决定哪些标记将显示.

问候,