Swipe and swipe back ion-item-sliding with gesture and with button

Ionic Framework Ionic Angular
1

Hello. I’m using ion-item-sliding and ion-item-option button for my ion-list.
With the slide gesture all works great.
But, I also need to open/close the hidden part with a button.
list2
list1

The open part was easy, but - for some reason, after slide, the button not trigger the clic event anymore. I think the ion-item is “locked” by the framework after the swipe.
Anyone has a workaround?
Thanks

2

What happens is that the ion-item-options takes the entire width of the ion-item-sliding when it is opened and the mouse events are disabled for the ion-item inside de sliding.

There is a workaround:

SCSS:

ion-item-sliding {
  ion-item {
    // 're-enable' user interaction
    pointer-events: all;
  }

  ion-item-options {
    // so it doesn't take the entire width
    width: fit-content !important;
  }
}

The following you probably already figured out, but I’ll put here in case someone is trying the same thing in the future.

TS:

toggleSliding(itemSliding: IonItemSliding) {
  itemSliding.getSlidingRatio().then((ratio: number) => {
    ratio >= 1 ? itemSliding.close() : itemSliding.open(undefined);
  });
}

Check the docs to understand the ratio

HTML:

<ion-item-sliding #itemSliding>
  <ion-item>
    <ion-label>Sliding Item with End Options</ion-label>
    <ion-button (click)="toggleSliding(itemSliding)" fill="clear">
      <ion-icon name="options-outline"></ion-icon>
    </ion-button>
  </ion-item>

  <ion-item-options>
    <ion-item-option>Favorite</ion-item-option>
    <ion-item-option color="danger">Delete</ion-item-option>
  </ion-item-options>
</ion-item-sliding>
1 Like
3

Hi, thank you very much!!!

This worked for me:

ion-item-sliding {
ion-item::part(native) {
// ‘re-enable’ user interaction
pointer-events: all;
}

ion-item-options::part(native) {
// so it doesn’t take the entire width
width: fit-content !important;
}
}

Thank you again!!!

1 Like