Components: Swipe gesture for tabs

[code-tree]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Content area of tabs can be swiped to change the tab

What is the current behavior?

Can't swipe

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

Follow spec

Which versions of Angular, Material, OS, browsers are affected?

86123a3f0ca5bc3f3cf5f1b1f2263564c861af2a

Is there anything else we should know?

I tried implementing this, but couldn't get the gestures config right. When testing I could bind to 'pan' but couldn't bind to 'swipe'. I added {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig} to providers but it still didn't work.

[Thommas]

I'm also interested in this feature.

The material1 documentation indicates that tabs are designed for swipe and so we should not put swipeable content inside tab contents. Fair enough.

If we can implement this ourselves, can we have a quick clue about how to proceed ?

I will have a look at md-sidenav because I think that is the only swipe enabled material2 UX component right now.

Edit: After looking at this component on alpha11, I have no idea how gesture works to close the sidenav.

[WouterVanherck]

This feature would be a great asset to webapps designed for touch-screen devices. I've tried to implement this myself but this is the fartest I got and I couldn't get it to work... Would be amazing if it came out of the box.

EDIT: I've been trying this for 2 days and I just found the solution to my problem.. I'll answer the stackoverflowquestion with a way to use swipe movement in tabs

[CLEMARCx]

@WouterVanherck I wrote a small directive based on your code. I answered to your stackoverflow post.

[PAStheLoD]

Hello,

Swipe events (swipeleft and swiperight) work beautifully, but they are hard to combine with drag, which would be great to have avoid the UX lag between the swipe gesture and any UI change.

Are there plans to implement swipe-with-drag for tabs? If not, could you give some pointers on what'd be the material/angular way to do it?

Thanks!

[odahcam]

As the team wrote in the README:

High level stuff planned for Q3 2018 (July - September):

Finishing cdk virtual-scroll
Finishing cdk drag-and-drop

I think that that "cdk drag-and-drop" could be a step for drag interactions in the UI. 🤔

[CharlBest]

The PR is so nearly done. Can't wait.

[Halfist]

Meanwhile we can use this approach.

[menahemc]

For making header swipe without changing selected tab:

.mat-tab-header-pagination {
display: none !important;
}
.mat-tab-header {
overflow: scroll !important;
}
.mat-tab-header::-webkit-scrollbar {
display: none !important;
}
.mat-tab-label-container {
overflow: initial !important;
}

[mohyeid]

+1 for this feature. Also, this need to work with scroll. Scrolling buttons are working step by step, which make it very hard to reach the following tab with very small steps.

Another plus if we are able to tell the users how many tabs on right or left, so they know more features available in other tabs.

[SvenBudak]

Sorry but... after 3 years its really time to start doing this :)

[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.

[dksdheeraj]

Hi Jelbourn,

In which version, it is expected to be implemented.

[jelbourn]

I'm going to close this issue and instead track gesture guidance in #19464

[angular-automatic-lock-bot[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._}