Setzen plattformspezifische Icons in Ionic

Question

Okay, das könnte entweder eine wirklich einfache Frage sein und ich werde mich verlegen fühlen, aber ich habe gerade begonnen, Ionic zu verwenden und ich spiele nur herum mit der Detaillierung der Benutzeroberfläche mit Icons .

Meine Frage ist, ob Sie die Symbole in einem Element festlegen können und sie je nach der Plattform, für die Sie erstellen, unterschiedlich rendern können?

Zum Beispiel habe ich einen Menüpunkt hatte wie so

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

In Ionicons gibt es ein ion-locked Symbol sowohl für android (ion-android-locked) und ios (ion-ios-locked) und ich frage mich, ob es einen Weg gibt, um Stellen Sie Symbole während des Erstellungsprozesses auf ihre Plattform ein?

Es kann nur sein, dass ich am Ende separate Zweige in Git habe, aber ich würde lieber nicht, wenn es eine einfache Möglichkeit, dies zu implementieren ist?

Answer 1

Da Ionic Framework auf Apache Cordova gebaut wird Sie die Verwendung der Apache Cordova Geräte-Plugin, das wird standardmäßig mit neuen Projekten machen:

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

Sie können so etwas wie dies dann tun:

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

Dann können Sie in Ihrem HTML-Code auf den Controller verweisen und das Symbol basierend auf der Plattform anzeigen:

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

Beachten Sie die ng-if. Abhängig davon, was die $ scope.devicePlatform ist, wird entschieden, welche der Tags angezeigt werden.

Grüße,

Answer 2

Sie einen cordova CLI Haken verwenden könnte, die bestimmte Platzhalter mit der eigentlichen Plattform oder einer Plattform bestimmten Wert ersetzt. Ein Prepare-Hook zum Beispiel würde bei jedem Build aufgerufen. Wie der "platform add to body" -Haken, der von yeoman für ein cordova-Projekt generiert wird. Der Haken ist Teil des Projekts, also ist es unter Ihrer Kontrolle.

Hier ist eine schöne Übersicht ist Haken über cordova Baujahr: http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

Answer 3

Alternativ zu Nic Robody ‚s approch Sie ng-class verwenden können:

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

HTML (mit ng-Klasse):

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

Answer 4

Sie könnten Sie scss-Datei anpassen.

Werfen Sie einen Blick Sie Plattform Vermögenswerte, index.html hat eine Klasse

class = "Plattform-Android-Plattform-cordova Plattform-Webansicht"

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

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

Answer 5

Eine bessere Lösung ist es, die ionische zu verwenden. Plattform.

In Ihrem Controller:

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

in Ihrem HTML:

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

Answer 6

Hinweis auf zukünftige Ionic 2 Benutzer, die über diese Frage führen: Plattform() -Methode Geräteplattform unten zu bekommen, wie die Ionic 2 RC2, der einfachste Weg, dies zu erreichen, ist mit den Attributen "ios" und "md" für den Tag ion-icon. Hier ist ein Beispiel mit verschiedenen Symbolen für iOS und Android ("md" AKA Material Design):

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

Answer 7

Für was es wert ist fast 3 Jahre später. Erstellen Sie einfach Ihre eigene Version der v2-Direktive.

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>