Posted by & filed under Navigation.

Overview

We need a responsive design for tabs to handle overflow, which will include a responsive state for the two levels of tabs as well.

 

Current tabs implementation

->> https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/tabs.html#

1.Justified

Screen Shot 2016-08-18 at 12.03.00 PM Screen Shot 2016-08-18 at 12.03.08 PM

However, When there are many tabs, it requires significant scrolling to find one of the tabs. Also, it’s not recommended in Material Design guidelines to present tags as a single column

->> https://material.google.com/components/tabs.html#tabs-usage

Screen Shot 2016-08-18 at 12.04.01 PM

 

You can also view this Angular Material demo
tabs

2.Responsive Secondary Tabs

Current secondary  tabs
Screen Shot 2016-08-18 at 12.58.52 PM
Screen Shot 2016-08-18 at 1.00.06 PM

It might be better for mobile use cases to scroll horizontal versus displaying all the options. Here are some suggestions to address the problem. ->>

Desktop-1
Screen Shot 2016-08-18 at 1.02.18 PM

Desktop-2

Screen Shot 2016-08-18 at 1.03.16 PM

 

Responsive Demo
responsive secondary tabs

 

Demo is  based on AngularJS ->> http://codepen.io/fishfish/pen/vKbzAw

3 Responses to “Tabs – Responsive Design”

  1. Hi, I would like have one more category called “Responsive”, where all patterns related to mobile is discussed. What is your opinion?
    Thanks, Kiran.

    Reply
    • @Kiran: Absolutely. We are actually just now starting discussions how we can incorporate mobile documentation and designs to PatternFly. We are currently in the brainstorming and planning phase, defining the scope of the effort and determining the precise deliverables. Stay tuned!

      Reply
    • Hi Kiran, That’ s a great idea. But I have a question about it , will all patterns related to mobile will be in it?
      When more and more patterns join in it , there will be a new problem that each pattern will be show at two places.
      How about add a tab named “Responsive” between “Overview””Design””Code”?
      When use find the pattern they can see what will it be show on mobile either.
      Thanks, Tao

      Reply

Leave a Reply

(will not be published)