mdList - Add swipe animation for items

[ScallyGames]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

Allow list-items to be swiped left/right to reveal additional actions on the item. Draging the item further should activate the outermost action.

What is the use-case or motivation for changing an existing behavior?

Many big applications already use this (gmail, iOS Mail, ...) and it is a rather common/already trained user behaviour.

Implemented in:

• Ionic (https://ionicframework.com/docs/api/components/item/ItemSliding/)
• Framework 7 (http://framework7.io/docs/swipeout.html)
• Poymer? (http://motss.github.io/paper-swipe/components/paper-swipe/) (https://poly-mail.appspot.com/)

Planned in Angular Material 1 (angular/material#1890)

[ScallyGames]

This is also described in https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls as leave-behinds.

[zmarwa]

+1

[marco-silva0000]

+1

[mackelito]

Using hammerJS and angular 4.2 animations this should be fairly easy. But should it really be part of core?

Supporting touch is optional and on desktop it does nothing but bloat the framework :/

[LarsVonQualen]

That's true. Where i'm currently consulting, we did a custom implementation using Hammerjs. That was fairly easy.

It would be awesome to have something like this in a touch module, in order to reduce bloat 😊

[GlauberF]

@mackelito , @LarsVonQualen would have an example in codepen, how to do using the hammerjs

[jososaga]

@LarsVonQualen could you provide an example code?

[ghost]

https://material.io/design/components/lists.html#behavior

[jelbourn]

As of Angular v9, we've decided to step back from the aspiration of adding gestures directly to the components, instead having the component library be agnostic to geature recognition. That said, we do still want to add documentation that explains how to go about adding gestures to the components.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}