在 Ionic 中设置特定于平台的图标答案

【问题标题】：Setting platform specific icons in Ionic在 Ionic 中设置特定于平台的图标
【发布时间】：2014-11-17 21:59:12
【问题描述】：

好的，所以这可能是一个非常简单的问题，我会感到害羞，但我刚刚开始使用 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-android-locked) 和 ios (ion-ios-locked) 都有一个 ion-locked 图标，我想知道是否有办法在构建过程中设置图标以匹配其平台？

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

【问题讨论】：

标签： css ionic-framework

【解决方案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;
  }
}

【讨论】：

我认为这是一个比条件语句更优雅的解决方案，它会破坏 html 并且在重用时需要重复。另一种选择是使用指令，但我仍然认为做这么简单的事情需要更多的代码。
这是我的首选解决方案 - 这确实属于 scss/css 区域，不应弄乱 html。
这种方法似乎是理想的，尽管在 iOS 上很难用文本替换图标，因为它们倾向于使用文本而不是图标。

【解决方案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 的内容，将决定显示哪些标签。

问候，

【讨论】：

Ionic 实际上无需包含插件即可提供平台信息。 ionicframework.com/docs/api/utility/ionic.Platform$scope.platform = ionic.Platform;<i ng-class="{'ion-android-locked': platform.isAndroid(), 'ion-ios-locked': !platform.isAndroid()}" class="icon"></i>
两者都是很好的建议，我在这里担心的是，对于每个需要实现的 html 元素，视图中都会有相当大的膨胀。我会实施，看看是否有东西出现；f 一路走来。谢谢各位！

【解决方案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'
}">

【讨论】：

【解决方案4】：

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

这里是关于 cordova 构建钩子的一个很好的概述：http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

【讨论】：

我会检查并报告。您有特定于该问题的示例吗？谢谢

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：