Impostazione di icone specifiche della piattaforma in Ionico

Question

Ok, quindi questa potrebbe essere una domanda molto semplice e io verrò via sentendomi imbarazzato ma ho appena iniziato a usare Ionic e sto solo giocando con i dettagli dell'interfaccia utente con icone .

La mia domanda è se è possibile impostare o meno le icone in un elemento e renderle in modo diverso a seconda della piattaforma per cui si crea?

Per esempio, ho avuto una voce di menu in questo modo

<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, v'è l'icona di un ion-locked sia per Android (ion-android-locked) e iOS (ion-ios-locked) e mi chiedevo se c'è un modo per impostare le icone per abbinare la loro piattaforma durante il processo di compilazione?

Può darsi che alla fine io finisca per avere rami separati per questo, ma preferirei non se c'è un modo semplice per implementarlo?

Answer 1

Dal ionico Framework si basa su Apache Cordova si può fare uso del plugin dispositivo Apache Cordova che viene fornito di serie con i nuovi progetti:

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

È quindi possibile fare qualcosa del genere:

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

Poi, nel tuo HTML è possibile fare riferimento il controller e mostrare l'icona basata sulla piattaforma:

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

Avviso il ng-if. A seconda di cosa $ scope.devicePlatform deciderà quale dei tag mostrerà.

saluti,

Answer 2

Si potrebbe utilizzare un gancio CLI cordova che sostituisce alcune segnaposti con la piattaforma reale o valore specifico piattaforma. Ad esempio, un hook di preparazione verrà chiamato ogni volta che si costruisce. Come il gancio "piattaforma aggiungi al corpo" generato da yeoman per un progetto cordova. Il gancio è parte del progetto, quindi è sotto il tuo controllo.

Ecco una bella panoramica ganci riguardante Cordova costruire: http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

Answer 3

alternativa a Nic Robody 's approch è possibile utilizzare ng-class:

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

HTML (usando ng classe):

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

Answer 4

È possibile personalizzare il file scss.

Date un'occhiata voi asset della piattaforma, index.html ha una classe

class = "piattaforma Android platform-Cordova-piattaforma di visualizzazione web"

//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

Una soluzione migliore è quella di utilizzare l'ionica. Piattaforma.piattaforma() metodo per ottenere piattaforma del dispositivo di seguito:

nel controller:

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

nel codice HTML:

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

Answer 6

Nota per i futuri utenti ionico 2 che attraversano questa domanda: Come di Ionic 2 RC2, il modo più semplice per farlo è con gli attributi "ios" e "md" per il tag ion-icon. Ecco un esempio con diverse icone per iOS e Android ("md" AKA Material Design):

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

Answer 7

Per quel che vale quasi 3 anni più tardi. Basta creare la propria versione della direttiva 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>