feat: ion-segment - Add horizontal scroll buttons

[tonyawad88]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request When having a larger number of ion-segment items that cannot be fitted on screen, we can enable property "scrollable", however it doesn't have any indication to the user that there are more elements / segments that are not showing. In other words, the user doesn't know that there are segments to scroll to that are not currently showing on the screen.

Describe Preferred Solution Ideally, a property gets added to show scrollable buttons on far left and far right to indicate to the user that there are items hidden to the right or to the left. Example from the material ui library: https://material-ui.com/components/tabs/#forced-scroll-buttons

Describe Alternatives N/A

Related Code N/A

Additional Context N/A

[tonyawad88]

@liamdebeasi if I wanted to work on this, do I need approval first from the design team or can I consider it as approved and work on it? Cheers

[liamdebeasi]

I need to talk with the team to see if this is something we would like to add. I can see the benefit of having this, but I would prefer to use the official Material Design Spec as a reference point (the material-ui website does not seem to be associated with Google). That being said, I cannot seem to find this arrow feature in the official specification: https://material.io/components/tabs.

Are you aware of any native Android apps that use these arrows?

[tonyawad88]

Unfortunately, I haven't been able to find any native Android apps that use these arrows. I checked Playstore, Gmail, Netflix, Spotify and a couple others but none have it.

I am surprised in the material specs there's no mention on whether it's good or bad to have buttons to assist with horizontal scrolling.

Let me know and I am happy to attempt this one. Cheers.

[liamdebeasi]

Hmm I wonder if the arrows are geared towards desktop apps. Scrolling tabs with a pointer is easy on a touch screen, but on desktop not everyone has touch-capable mice (like Apple's Magic Mouse). I will see if there are desktop web apps that use this feature.

[tonyawad88]

Not sure if this is relevant but I ran into this one from Vuetify. They seem to use the horiztonal nav buttons for their tabs. https://vuetifyjs.com/en/components/tabs/#dynamic-tabs

[colabottles]

@liamdebeasi Just a suggestion here if this is ongoing.

I would be careful with this and suggest a lot of testing for accessibility reasons. Especially with users that use voice commands (Voice Control on iOS/ Voice Access on Android) on mobile. I'd also be interested in finding out (and can ask around) about users with virtual keyboards how this interaction would work with them.

There is also concern I have with Reflow issues in different sized viewport widths that aren't considered/intrinsic design not implemented. Which shouldn't be an issue, but there are always edge cases I have found.

If done right, this can work, I have no doubt.