Ionic-framework: feature(ion-item-sliding): Allow item also to swipe from left to right

Created on 19 Jan 2016  Â·  12Comments  Â·  Source: ionic-team/ionic-framework

_From @astec on November 1, 2015 2:46_

I want to swipe my ionic list items to both side. (i.e left-right AND right-left). It work perfectly for right-left swipe but i am not able to swipe my list item left-righ (to see buttons on left side).

Here is an example workaround: http://stackoverflow.com/a/31816296/1975086

_Copied from original issue: driftyco/ionic2#411_

Most helpful comment

@astec @thomastthai @masimakopoulos the two way sliding will arrive in beta9, it will support having two different sets of buttons at the same time (side left/right), right side will be the default one, so expect it to be back compatible.
It has been improved a lot in general, it will behave more like a native app.
also, you will be able to subscribe to new events like (ionDrag) and (ionSwipe) and implement things like this very easily:

jun-04-2016 18-33-17

The animation below is 100% CSS, so you can customize it.

    <ion-item-sliding #item>
      <ion-item>DOWNLOAD</ion-item>

      <ion-item-options (ionSwipe)="download(item)">
        <button primary (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>Archive
        </button>
        <button secondary swipeable (click)="download(item)">
          <ion-icon name="download"></ion-icon>Download
        </button>
      </ion-item-options>

      <ion-item-options side="left" (ionSwipe)="unread(item)">
        <button secondary swipeable (click)="unread(item)">
          <ion-icon name="ios-checkmark"></ion-icon>Unread
        </button>
      </ion-item-options>

    </ion-item-sliding>

All 12 comments

Do you think I can do a pull request with my answer? People keep asking me for my solution, but the way it was made it won't let people update ionic without loosing the feature.

+1 for this feature. Both native iOS and android support both sides swiping for items.

Did this code make it into beta? I would love to see this extended to the entire list instead of just the list-items like in Google Now.

@thomastthai @masimakopoulos @pcagica https://github.com/driftyco/ionic/pull/6686

Thank you for updating. How would I get the change locally before it is
merged into the main branch?
On May 28, 2016 3:24 AM, "Manu Mtz.-Almeida" [email protected]
wrote:

@thomastthai https://github.com/thomastthai @masimakopoulos
https://github.com/masimakopoulos @pcagica https://github.com/pcagica

6686 https://github.com/driftyco/ionic/pull/6686

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/5073#issuecomment-222301396,
or mute the thread
https://github.com/notifications/unsubscribe/APxEZV_Gc-s5-67pcygpUYeKCQli45Glks5qGBfNgaJpZM4HHUVA
.

Also, is the code adaptable to being able to swipe the entire list left or
right in addition to the list items?
On May 28, 2016 3:24 AM, "Manu Mtz.-Almeida" [email protected]
wrote:

@thomastthai https://github.com/thomastthai @masimakopoulos
https://github.com/masimakopoulos @pcagica https://github.com/pcagica

6686 https://github.com/driftyco/ionic/pull/6686

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/5073#issuecomment-222301396,
or mute the thread
https://github.com/notifications/unsubscribe/APxEZV_Gc-s5-67pcygpUYeKCQli45Glks5qGBfNgaJpZM4HHUVA
.

@astec @thomastthai @masimakopoulos the two way sliding will arrive in beta9, it will support having two different sets of buttons at the same time (side left/right), right side will be the default one, so expect it to be back compatible.
It has been improved a lot in general, it will behave more like a native app.
also, you will be able to subscribe to new events like (ionDrag) and (ionSwipe) and implement things like this very easily:

jun-04-2016 18-33-17

The animation below is 100% CSS, so you can customize it.

    <ion-item-sliding #item>
      <ion-item>DOWNLOAD</ion-item>

      <ion-item-options (ionSwipe)="download(item)">
        <button primary (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>Archive
        </button>
        <button secondary swipeable (click)="download(item)">
          <ion-icon name="download"></ion-icon>Download
        </button>
      </ion-item-options>

      <ion-item-options side="left" (ionSwipe)="unread(item)">
        <button secondary swipeable (click)="unread(item)">
          <ion-icon name="ios-checkmark"></ion-icon>Unread
        </button>
      </ion-item-options>

    </ion-item-sliding>

@manucorporat, that's cool!

https://github.com/driftyco/ionic/pull/6686 was merged, available in next release!

Thank you for the work you did.
On Jun 8, 2016 12:33 PM, "Manu Mtz.-Almeida" [email protected]
wrote:

6686 https://github.com/driftyco/ionic/pull/6686 was merged, available

in next release!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/5073#issuecomment-224702293,
or mute the thread
https://github.com/notifications/unsubscribe/APxEZX4AqU6dtoDEJQFd6hJJkCQYgcXCks5qJxkfgaJpZM4HHUVA
.

@manucorporat way to go buddy! Keep up the amazing work guys!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RobFerguson picture RobFerguson  Â·  3Comments

BilelKrichen picture BilelKrichen  Â·  3Comments

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  Â·  3Comments

alexbainbridge picture alexbainbridge  Â·  3Comments

brandyscarney picture brandyscarney  Â·  3Comments