Framework7: Swipeable Scrollable Tabs

[vestaxpdx]

This is a:

• [x] enhancement
• [x] feature-discussion (RFC)

Hi

It would be great if swipeable tabs could dynamically scroll as you swipe when there are too many tabs to justify into one screen. Also you can manually scroll the tabs to jump to a new one etc... Please see below.

Currently the tabs always try and justify into one width no matter how many you have. I can imagine this is a bit of a brain ache to figure out. Would need some kind of minimal width flag perhaps before tabs overflow.

This would be really awesome feature to have and adds great user experience. Doesn't need to just be for material theme.

Cheers

[J05HI]

@nolimits4web
Nice feature :)

[vestaxpdx]

@ZanderBrown can we label this iOS Theme too? This featured shouldn't just be for the material theme if possible.

[ZanderBrown]

I'm not sure it fits with the iOS HIG.
That said if you can provide an example i'll happily add the iOS label

[vestaxpdx]

This is what YouTube currently have on their iOS version. I admit it is a custom implementation but if the component is built we should be able to use it and style it how we deem fit on both themes. It is a very handy UI feature.

The current kitchen sink versions are here for reference.

[ZanderBrown]

I'm afraid YouTube is a bad example as it follows material styles

[vestaxpdx]

I am not saying it should look that that example as yes that would not match the iOS theme at all. Just implying that even top companies deem it a worthy UI feature across both iOS and Android.

An idea for the iOS theme tabs could be to scroll the tabs within the bordered grouped button container perhaps. Half showing one tab would indicate more and as the user wipes left or right they will see them animate etc.

[cooldp007]

HI ,@vestaxpdx

I want to implement swipeable tabs in my ionic 2 project

can you please share me your source code for this?

[vestaxpdx]

@cooldp007 This place is for framework7 not ionic 2

[Olumyco]

Vestaxpdx thank you. This feature dynamic tab scrolling is very essential. Infact it is long overdue. I need it badly self. I recently downloaded the new Framework 7 last month with the hope that this feature might have been added. Lo and behold it has not been added. I dont know how F7 team can resolve once and help add this feature... I developed an app and I will like to add this feature to it.

And is there an alternative may be another library I could use to achieve this?

[nolimits4web]

It can be achieved by using two swipers and setting them to control each other

[vestaxpdx]

@nolimits4web That sounds great, is there any chance of a quick code example?

[J05HI]

Yeah an example in the kitchen sink would be amazing!!!

[cccaballero]

Hi guys, any example on how to achieve this?