feat: swipeable segment (swipe on content to move segment)

[NgYueHong]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Swipeable tabs is a common and long requested feature to have on Ionic. Really hope to see swipeable tabs feature in Ionic 4 soon.

[brandyscarney]

Thanks for the issue! The scrollable tabs that you see in the Material Design spec is available in our Segment component using the scrollable property.

Please see the usage information on that page: https://ionicframework.com/docs/api/segment#usage

They can be combined with slides to achieve a swipe between views effect, see this example Codepen: https://codepen.io/brandyscarney/pen/maOabQ?editors=1010

[nicolasrhone]

But this way, we don't have possibility to lazy load slides... which would be great!

[uriannrima]

Thanks for the great example @brandyscarney!!! Was having some trouble using the tabs for that.

By the way, for those looking for a better "feel" for when changing the segment when scrolling the panel, you may use "ionSlideWillChange". It seems a bit better than "onDid".

[bunday]

Very Helpful

[khashashin]

Some additional api for swiping segments would be also greate. There are no way to swipe them programmatically. Otherwise please provide some issue solver hier https://stackoverflow.com/q/57047922/7986808

[sagits]

Hi, in my case using sliders was a bad solution because i need the lazyloading. I ended up using segments with this lib:

https://github.com/diogoqueiros/ionic-swipe-all

[NgYueHong]

@BrandonShar Are we able to see Swipeable Tab on Ionic 5?

[hellokingdom]

@BrandonShar it's typical in this scenario for each slide to have an independently scrollable content area but the examples I have seen a linked due to a single ion-content.

Is there an agreed approach for this inside the constraints of the ionic framework?

[shashwat44]

in ionic 5 : issue occurs

[ng] ERROR in node_modules/ionic2-super-tabs/dist/components/super-tab.d.ts:2:132 - error TS2307: Cannot find module 'ionic-angular'. [ng] 2 import { App, Config, DeepLinker, DomController, GestureController, NavControllerBase, NavOptions, Platform, ViewController } from 'ionic-angular'; [ng] ~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-super-tabs/dist/components/super-tab.d.ts:3:38 - error TS2307: Cannot find module 'ionic-angular/transitions/transition-controller'. [ng] 3 import { TransitionController } from 'ionic-angular/transitions/transition-controller'; [ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-super-tabs/dist/components/super-tabs.d.ts:5:118 - error TS2307: Cannot find module 'ionic-angular'. [ng] 5 import { App, DeepLinker, DomController, NavController, NavControllerBase, Platform, RootNode, ViewController } from 'ionic-angular'; [ng] ~~~~~~~~~~~~~~~ [ng] node_modules/ionic2-super-tabs/dist/components/super-tabs.d.ts:6:37 - error TS2307: Cannot find module 'ionic-angular/navigation/navigation-container'. [ng] 6 import { NavigationContainer } from 'ionic-angular/navigation/navigation-container'; [ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [ng]

[NeckbreakerPascal]

Thanks for the issue! The scrollable tabs that you see in the Material Design spec is available in our Segment component using the scrollable property.

Please see the usage information on that page: https://ionicframework.com/docs/api/segment#usage

They can be combined with slides to achieve a swipe between views effect, see this example Codepen: https://codepen.io/brandyscarney/pen/maOabQ?editors=1010

Are there any changes with this for ionic5? I tried but it did not work. I use ion-tabs and have 3 tabs with ion-slides.

Only on the First (initial) slider I can use the ion-segment to change the sliders, on the others the segment-indicator is moving but slideTo does not work. Also getActiveIndex and the rest of it.

It is kind of strange that the ionslidedidLoad event is triggered multiple times. Maybe there is some error, or I did something wrong. or I should open an new issue, not sure if it is related to this .Was just hoping your code will save me. :D

[juny58]

I have long waited for this, finally made one web-component with ionic's stencil. It works in any platform and in all popular frameworks.

https://www.npmjs.com/package/mat-tab-swiper

[juny58]

Thanks for the issue! The scrollable tabs that you see in the Material Design spec is available in our Segment component using the scrollable property.

Please see the usage information on that page: https://ionicframework.com/docs/api/segment#usage

They can be combined with slides to achieve a swipe between views effect, see this example Codepen: https://codepen.io/brandyscarney/pen/maOabQ?editors=1010

I have long waited for this, finally made one web-component with ionic's stencil. It works in any platform and in all popular frameworks.

https://www.npmjs.com/package/mat-tab-swiper

[ntorrey]

Would love to see this as a built-in feature!

[Hesesses]

I would like to create something like this. Is is currently possible? Swiping middle of the screen

https://github.com/user-attachments/assets/b177710b-0687-46f5-8ca1-5beecb81587d

[brandyscarney]

Thank you for reporting this issue! This feature was added by this commit and is available starting with Ionic 8.4.0.

You can find the documentation for how to use these components here: https://ionicframework.com/docs/api/segment#swipeable-segments.

If you run into any problems with them, please open a new issue. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.