Zmień element-left-edit na item-right-edit na Ionic

Question

Przepraszam, jeśli moje pytanie jest dziwne, jestem początkującym w strukturze jonowej.

Umieszczam show-delete="true" na mojej liście jonów i przycisku usuwania jonów. To działa świetnie.

Ale teraz chcę, aby ten przycisk był po prawej stronie.

Kiedy przyjrzę się wygenerowanemu kodowi, wszystkie klasy to "item-left-edit" i "item-left-editable".

Chciałbym wygenerować "item-right-edit" i "item-right-editable".

Nie znajduję żadnych informacji na temat tych wygenerowanych lekcji w dokumentach ... Jeśli ktoś ma pomysł, w jaki sposób powinienem kontynuować?

Edycja: tutaj jest fragment kodu:

<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

końcu znalazłem coś przez modifiyng z ionic.bundle.js złożyć tak:

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

zamiast

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

W każdym razie, zastanawiałem się, czy istnieje bardziej "właściwy" sposób, aby to zrobić ...

Answer 2

również użyć

$ element.children() toggleClass ('list-prawo edycji' isShown.);

zamiast

$ element.children() toggleClass ('lista lewym edycji', isShown.);

Answer 3

wychodził dokładnie ten sam problem i to, co zrobiłem, było to ...

Złapałam style z klasy .item-right-edit i wszystkie jego dzieci dodaje klasę prefiksu chciałem odwrócić zachowanie jak .my-class .item-right-edit, następnie dodano brakujący styl, który był left: 0; do klasy głównej .item-right-edit i ostatecznie zmieniono nazwę klasy na .item-left-edit.

Wadą tego jest to, że będziemy mieć klasę o nazwie .item-left-edit, która będzie zachowywać się jak klasa .item-right-edit, ale dodanie prefiksu danej klasy nie będzie kolidować z innymi częściami aplikacji.

zostawiam tutaj CSS użyłem, aby przełączyć się do zachowania:

.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); } 

Hope this helps :)