Drehen Sie ein ionicon auf der Seite

Ich möchte zur Anzeige von Richtungen, die mit Pfeilen und dachte, verwenden Sie die standard ionic Pfeil für die Richtung.
Kann ich drehen Sie den Pfeil in jede Richtung irgendwie?

ion-arrow-up-a

Hier ist ein Versuch, aus den Kommentaren unten

<i class="icon ion-arrow-up-a" rotate degrees="90"></i>


angular.module('app.customDirectives', []).directive('rotate', function() {
      return {
            link: function(scope, element, attrs) {
                //watch the degrees attribute, and update the UI when it changes
                scope.$watch(attrs.degrees, function(rotateDegrees) {
//                 console.log(rotateDegrees);
                    //transform the css to rotate based on the new rotateDegrees
                    element.css({
                        '-moz-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-webkit-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-o-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-ms-transform': 'rotate(' + rotateDegrees + 'deg)'
                    });
                });
            }
    }
});
  • Haben Sie schaute in die jquery-drehen plugin?
  • Ich bin in der Ionischen Sphäre hier, also kein jquery ( ich denke, so wie ich das verstehe jQ wird nicht vollständig unterstützt / kompatibel da...)
InformationsquelleAutor El Dude | 2015-06-16
  1. 8

    Ähnlich wie oben, das ist, wie ich es Tat...

    HTML:

    <i class="ion-arrow-up-c rotate-90">

    CSS:

    .rotate-90 {
  display: inline-block; 
  transform: rotate(90deg);
}
    InformationsquelleAutor sam pierce
  2. 6

    Gibt es andere Varianten von Pfeil:

    ion-arrow-up-a
ion-arrow-right-a
ion-arrow-down-a
ion-arrow-left-a

    ... Oder Wie ich weiß, ionic framework ist HTML5-basiert, so können Sie CSS-Stile.

    .style {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

    Wenn Sie möchten, dass die dynamische rotation, die Sie haben zu prüfen diese url.

    • Toller link! Ich verstehe die Richtlinie, aber es dreht sich nicht mein-Ionen-Pfeil .... Ich brauche es, um anzuzeigen, Grad wie in einem Kompass.
    • Zeigen Sie Ihren code, und ich werde versuchen, herauszufinden, was falsch ist.
    • Siehe code oben, im wesentlichen die gleiche aus dem link, den Sie zur Verfügung gestellt.
    • Finden Sie die Antwort auf Ihre Frage in der gleichen Stelle, wo u habe diese code (link oben). Sie haben, um $scope var und übergeben es an degrees, nicht nur Wert.
    • Danke, ich werde es versuchen. Aber warum sollte es nicht nehmen hartcodierte Werte?
    InformationsquelleAutor Shamil Yakupov
  3. 5

    Für Ionische Symbole v1, v2, insbesondere die drehen-Eigenschaft funktioniert nur mit dem display-Eigenschaft "inline" - oder "inline-block", es könnte funktionieren mit anderen Varianten der inline-als auch.

    Dann können Sie drehen Sie in der Regel mit CSS

    transform: rotate(90deg);
    InformationsquelleAutor Akil
  4. 0

    aus irgendeinem Grund die <i> element besitzen muss, um display: inline-block css-Stil zu drehen, erfolgreich:

    controller-code:

    $scope.angle = 90

    HTML:

    <i class="ion-arrow-up-c" style="display: inline-block; transform: rotate({{angle}}deg);"></i>
    InformationsquelleAutor Peter
Schreibe einen Kommentar