Item-Linke-Edit zu Item-Right-Edit zu Ionische

Question

ändern

Sorry, wenn meine Frage seltsam ist, bin ich ein Anfänger in Ionic Framework.

Ich habe eine show-delete="true" auf meiner Ion-Liste und einem Ion-Delete-Button. Das funktioniert gut.

Aber jetzt möchte ich diese Schaltfläche auf der rechten Seite sein. Wenn ich mir den generierten Code anschaue, sind alle Klassen "item-left-edit" und "item-left-editable".

Ich möchte die "item-right-edit" und "item-right-editable" generieren.

Ich finde keine Informationen über theses generierte Klassen in Dokumenten ... Wenn jemand eine Idee hat, wie soll ich fortfahren?

Edit: hier ist das Stück Code:

<ion-list show-delete="true" side="right"> 
       <ion-item ng-repeat="task in activeProject.tasks" class="item-right-editable"> 
        {{task.title}} 

         <ion-delete-button class="ion-android-cancel" ng-click="deleteTask($index)"></ion-delete-button> 

       </ion-item> 
      </ion-list> 

Answer 1

ich endlich etwas gefunden, von modifiyng die ionic.bundle.js wie diese Datei:

var ITEM_TPL_DELETE_BUTTON = 
    '<div class="item-right-edit item-delete enable-pointer-events">' + 
    '</div>'; 

statt

var ITEM_TPL_DELETE_BUTTON = 
    '<div class="item-left-edit item-delete enable-pointer-events">' + 
    '</div>'; 

Wie auch immer, ich fragte mich, ob es dort mehr "richtige" Art und Weise zu tun ...

Answer 2

auch

$ element.children() verwenden, toggleClass ('list-rechts-Bearbeitung', isShown).

statt

$ element.children() toggleClass ('list-links-Bearbeitung', isShown).

Answer 3

ich konfrontiert genau das gleiche Problem und was ich tat, war dies ...

ich die Stile aus der .item-right-edit Klasse packte und alle seine Kinder hinzugefügt, um das Präfix Klasse I das Verhalten wie .my-class .item-right-edit invertieren wollte, dann fügte ich einen fehlenden Stil hinzu, der left: 0; zu der Hauptklasse .item-right-edit war und schließlich benannte ich die Klasse in .item-left-edit um.

Der Nachteil ist, dass wir eine Klasse namens .item-left-edit haben werden, die sich tatsächlich als Klasse verhalten wird, aber das Hinzufügen des spezifischen Klassenpräfixes wird andere Teile der App nicht stören.

Ich lasse hier die CSS ich über das Verhalten zu wechseln verwendet, um:

.my-class .item-left-edit { 
    -webkit-transition: all ease-in-out 250ms; 
    transition: all ease-in-out 250ms; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 3; 
    width: 75px; 
    height: 100%; 
    background: inherit; 
    padding-left: 20px; 
    left: auto; 
    display: block; 
    opacity: 0; 
    -webkit-transform: translate3d(75px, 0, 0); 
    transform: translate3d(75px, 0, 0); } 
    .my-class .item-left-edit .button { 
    min-width: 50px; 
    height: 100%; } 
    .my-class .item-left-edit .button.icon { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -moz-box; 
     display: -moz-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     -moz-align-items: center; 
     align-items: center; 
     position: absolute; 
     top: 0; 
     height: 100%; 
     font-size: 32px; } 
    .my-class .item-left-edit.visible { 
    display: block; } 
    .my-class .item-left-edit.visible.active { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); } 

this helps :)