CODEWITHSUNDEEP
angularjsangularjs-directiveangular-uiionic-framework
Dmytro Titov
Dmytro Titov

Reputation: 3201

Ionic list: swipe to remove?

Is there any possibility to implement "swipe-to-remove" (like in Android task-screen) functionality with "ion-list"?

I have found "can-swipe" directive that allows to add some buttons which appear under partly-swiped item, but that's not what I'm looking for. I need to fully swipe an item (both sides) and remove it when it becomes swiped to the end of the screen.

Upvotes: 7

Views: 6679

Answers (2)

Dmytro Titov
Dmytro Titov

Reputation: 3201

OK, it seems like "ion-list" doesn't have built in "swipe-to-delete" functionality.

Nevertheless I implemented it using Hammer Plugin for Angular.js and some custom directives and logic. That allowed to make list-items be swipeable. And then I used How to remove an item from scope in AngularJS? technology for actual elements removal.

Upvotes: 1

Josh O'Connor
Josh O'Connor

Reputation: 4962

I do not recommend doing what Dmytro suggested, there is an easy way to do this.

Use the expandable options:

Add #ionItem to the ion-item being swiped, and add side="end" and the (ionSwipe) event to the ion-item-options in your HTML.

<ion-item #ionItem>
</ion-item>
<ion-item-options side="end" (ionSwipe)="swipedNotification(ionItem)">
    <ion-item-option class="notifications-swipe-button" expandable>&nbsp;</ion-item-option>
</ion-item-options>

And in your css, make the width of the button 30px so you can trigger ionSwipe, which isn't called if the width is too large:

.notifications-swipe-button{
    width: 30px; 
}

And in your ts file, on add your function that to be called on (ionSwipe) in your HTML, and animate the content all the way to the left:

swipedNotification(el){
    el.el.style.transform = `translate3d(calc(-100vw), 0px, 0px)`;
}

Keep in mind, this is set up to swipe left to dismiss, if you want to swipe right, you will have to update the x property in translate3d.

Upvotes: 2

Related Questions