CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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将决定哪些标记将显示.

问候,

大佬总结

以上是大佬教程为你收集整理的css – 在Ionic中设置平台特定图标全部内容,希望文章能够帮你解决css – 在Ionic中设置平台特定图标所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。