ItemSliding in side menu

Ionic Framework ionic-v3
1

Hello,
My app has side menu and I want menu items to be added and removed by user. I thought that item removal would be nice to do with ion-item-sliding: https://ionicframework.com/docs/v2/api/components/item/ItemSliding/

I put this code to my menu, but it does nothing when I swipe :

        <ion-list>
          <ion-item-sliding #item>
            <ion-item>
              Item
            </ion-item>
            <ion-item-options side="left">
              <button ion-button (click)="favorite(item)">Favorite</button>
              <button ion-button color="danger" (click)="share(item)">Share</button>
            </ion-item-options>
            <ion-item-options side="right">
              <button ion-button (click)="unread(item)">Unread</button>
            </ion-item-options>
          </ion-item-sliding>
        </ion-list>

In normal page swiping works.
I noticed line:
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> in app.html. Tried to change to "true" and even removed swipeBackEnabled="false", but without luck.

Is it even possible to have swipeable side menu items in Ionic2?

2

Thats for the sidemenu.

I Just tried your code and it worked for me, maybe you should try update ionic scripts or try it on a new app to test if it is your current app that has something wrong with it.

3

sudo npm install -g cordova ionic
ionic start --v2 myTestApp sidemenu --ts
cd myTestApp

change src/app/app.html to:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>

    <!-- Start of added lines -->
    <ion-list>
      <ion-item-sliding #item>
        <ion-item>
          Item
        </ion-item>
        <ion-item-options side="left">
          <button ion-button (click)="favorite(item)">Favorite</button>
          <button ion-button color="danger" (click)="share(item)">Share</button>
        </ion-item-options>
        <ion-item-options side="right">
          <button ion-button (click)="unread(item)">Unread</button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
    <!-- End of added lines -->

  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

ionic serve

image

ionic info

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2.1 Build version 8C1002

4

Sorry, I misunderstood. I do not think you can have an itemsliding in a sidemenu, unless you make a custom one.

This swipeBackEnabled="false" is for the sidemenu not item sliding.

Sorry I could not help.

5

@S.G, thank you anyway!
For now I solved problem with Alert Checkbox (https://ionicframework.com/docs/v2/components/#alert-checkbox) where user selects items he/she want to remove.

image

If anyone have an idea how to make item-sliding work in menu, I would be happy to rewrite my current solution to item-sliding one. Or maybe there is even better way (I mean UX) how to make menu items deletable?

6

To be honest, as a user, I wouldn’t want this in an app. Sliding items in a swipable menu just sounds like bad UX and should be avoided

1 Like
7

@mhartington, thank you for the advice. I’m dropping the idea to put sliding items in swipable menu and staying with alert checkbox where user can select items he/she want to delete.