[Silk UI Framework] Navigation\Tabs on mobile

[Silk UI Framework] Navigation\Tabs on mobile

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs

Folks,

I am using the Navigation\Tabs (5 tabs) and it looks great on desktop and tablet.

However, on the phone, the tabs result in a horizontal scroll bar for the tabs.

There must be a better way - what is is??

Here is a screenshot of what I am talking about ...



Solution

Hi Bruce,

This is a rather common pattern in mobile apps (tabs being scrollable). In mobile devices, the scroll bar itself, is done in overlay with the app, so it does not occupy screen space - e.g. tags in Play Store (and before that, tabs).

The screenshot that you have was taken in desktop.

Let me know if this answers to your question.

Cheers,
RG



Solution

Rúben Gonçalves wrote:

Hi Bruce,

This is a rather common pattern in mobile apps (tabs being scrollable). In mobile devices, the scroll bar itself, is done in overlay with the app, so it does not occupy screen space - e.g. tags in Play Store (and before that, tabs).

The screenshot that you have was taken in desktop.

Let me know if this answers to your question.

Cheers,
RG



Thanks Ruben ... I see what you mean.

On the simulator, you get the ugly side-scrolling bar ... BUT ... when I look at it on an actual phone, a simply side-swipe allows the user to see the tabs.

So, in short, I am going with this approach - the side-swipe is actually pretty nice!


Bruce 


Awesome Bruce! Good to know! :)