cambia articolo-left-edit in item-right-edit in Ionic

Question

Scusa se la mia domanda mi sembra strana, sono un principiante nel framework ionico.

Ho inserito un elenco show-delete="true" nell'elenco di ioni e un pulsante di cancellazione ioni. Funziona alla grande.

Ma ora voglio che questo pulsante sia sulla destra.

Quando guardo il codice generato, tutte le classi sono "item-left-edit" e "item-left-editable".

Mi piacerebbe generare il "item-right-edit" e il "item-right-editable".

Non riesco a trovare alcuna informazione sulle classi generate da tesi in documenti ... Se qualcuno ha un'idea di come procedere?

Edit: qui è la parte di codice:

<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

ho finalmente trovato qualcosa da modificando l'ionic.bundle.js file in questo modo:

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

invece di

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

In ogni caso, mi chiedevo se ci fosse un modo più "corretto" per farlo ...

Answer 2

utilizzare anche

$ element.children() toggleClass ('list-destra-editing', isShown).;

invece di

$ element.children() toggleClass ('list-sinistra-editing', isShown).;

Answer 3

ho affrontato esattamente lo stesso problema e quello che ho fatto è stato questo ...

ho afferrato gli stili dalla classe .item-right-edit e tutti i suoi figli ha aggiunto la classe prefisso ho voluto invertire il comportamento come .my-class .item-right-edit, quindi aggiunto uno stile mancante, ovvero left: 0; alla classe principale .item-right-edit e infine ho rinominato la classe in .item-left-edit.

Lo svantaggio di questo è che avremo una classe chiamata .item-left-edit che si comporterà effettivamente come classe .item-right-edit, ma l'aggiunta del prefisso di classe specifico non interferirà con altre parti dell'app.

lascio qui il CSS che ho usato per passare il comportamento:

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

Spero che questo aiuti :)