css – 在Ionic中设置平台特定图标

好的,所以这可能是一个非常简单的问题,我会感到羞怯,但我刚刚开始使用Ionic,而我只是在用图标详细说明用户界面.

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

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

<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中,有一个用于安卓(离子锁定)和ios(离子锁定)的离子锁定图标,我想知道是否有一种方法可以在构建过程中设置图标以匹配他们的平台？

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

解决方法

由于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将决定哪些标记将显示.

问候,