Geek Answers Handbook

Change item-left-edit in item-right-edit in Ionic

Sorry if my question seems weird, I'm new to the Ionic framework.

I put show-delete="true" on my ion list and ion removal button. This works great.

But now I want this button to be on the right.

When I look at the generated code, all the classes are "item-left-edit" and "item-left-editable" .

I would like to generate "item-right-edit" and "item-right-editable" .

I do not find any information about the theses generated in the documents ... If anyone has an idea, how should I continue?

Edit: here is the code snippet:

  <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>
+5
source share
3 answers

I finally found something by running the modifiyng ionic.bundle.js file as follows:

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

instead

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

In any case, I was wondering if there is a more “correct” way to do this ...

0
source

also use

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

instead

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

0
source

I ran into the same problem and I did this ...

I grabbed the styles from the .item-right-edit class, and all its children added the prefix class that I wanted to invert, for example, like .my-class .item-right-edit , and then added the missing style, which was left: 0; to the main class .item-right-edit and finally I renamed the class to .item-left-edit .

The disadvantage of this is that we will have a class called .item-left-edit , which will behave like the .item-right-edit class, but adding a specific class prefix will not interfere with other parts of the application.

I leave here the CSS that I used to switch the behavior:

 .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 :)

0
source

More articles:


All Articles