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中，android（ion-locked）和ios（ion-android-locked）都有一个ion-ios-locked图标，我想知道是否有办法设置图标以匹配他们的平台在构建过程中？

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

Answer 1

您可以自定义scss文件。

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

class =＆＃34; platform-android platform-cordova platform-webview＃34;

//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将决定哪些标记将显示。

此致

Answer 3

除Nic Robody方法外，您还可以使用ng-class：

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

HTML（使用 ng-class ）：

<i class="icon" ng-class="{
    'ion-android-locked': devicePlatform === 'Android',
    'ion-ios-locked': devicePlatform !== 'Android'
}">

Answer 4

您可以使用cordova CLI挂钩，用实际平台或平台特定值替换某些占位符。例如，每次构建时都会调用一个prepare钩子。就像自由人为cordova项目生成的“平台添加到身体”钩子一样。钩子是项目的一部分，所以它在你的控制之下。

以下是有关cordova构建挂钩的概述：http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

Answer 5

更好的解决方案是使用ionic.Platform.platform（）方法获取以下设备平台：

在您的控制器中：

angular.module('App', ['ionic'])
.app.controller("appCtrl", function($scope) {
    $scope.devicePlatform = ionic.Platform.platform();
});

在你的HTML中：

<i class="icon" ng-class="{
          'ion-arrow-left-c': devicePlatform === 'android',
          'ion-ios-arrow-back': devicePlatform !== 'android'}"> Back</i>

Answer 6

对于遇到此问题的未来Ionic 2用户请注意：从Ionic 2 RC2开始，最简单的方法是使用ion-icon标记的“ios”和“md”属性。这是一个包含iOS和Android不同图标的示例（“md”AKA Material Design）：

<ion-icon ios="ios-outline-lock" md="md-lock"></ios-icon>

Answer 7

近3年后的价值。只需制作自己的v2指令版本即可。

function icon() {
  return {
    restrict: 'A',
    scope: {},
    compile: function(element, attrs) {
      //change here for specific device default
      var platform = ionic.Platform.platform() || 'ios';
      var iconClass = (platform === 'ios') ? attrs.ios : attrs.droid;
      element[0].classList.add(iconClass);
    }
  };
}

angular
  .module('common.directives')
  .directive('icon', icon);

<i class="icon ion-iphone placeholder-icon" icon ios="ion-test" droid="droid-test"></i>

在Ionic中设置平台特定图标

7 个答案: