Responsive?

[rohan-deshpande]

Great component!

Any thoughts on making these responsive? There's some nice ideas here using Bootstrap 3 tabs.

[dmitry]

@rohan-deshpande by the time I'm using https://github.com/maslianok/react-responsive-tabs

[sgilligan]

my preference is to transform into a drop down rather than accordion (for mobile scenarios) eg https://codepen.io/jpkempf/details/Awxbo

[dmitry]

What if dropdown is too long?

[sgilligan]

yes, the dropdown would need some smarts to make it scrollable if there were too many elements for the available space.

[MartinHaeusler]

I just ran into this issue as well. This library does everything a tabsheet needs to do (and does it nicely) except for proper overflow handling. I guess this has to be some CSS media query magic in the background to make it happen?

I'm fine with either the dropdown or left/right scroll buttons (slight preference for the dropdown). I just would like to avoid:

• tabs becoming unreachable for the user (except by resizing the window)
• showing the vanilla browser scrollbar

[stephen-oconnor]

Any plans to make this responsive?

[bmsterling]

For those that are interested, I did fork this repo to make a responsive version similar to what @sgilligan posted: https://github.com/localmotors/react-tabs

You can see in action: https://launchforth.io/styleguide/react/

[sgilligan]

nice! exactly what I was looking for. @dmitry if the drop down is long, it wouldn't be any different to the length of an accordion style implementation. I like the implementation from @bmsterling as when selected, the UI is keep minimal which is great on mobile.

[grawlinson]

Any plans for forking the changes back into this repo? Would be nice.

[danez]

@bmsterling I think this can be done now with react-tabs itself by simply doing.

<Tabs>
  <div className="react-tabs__menu is--open">
    <TabList> ... </TabList>
  </div>
  <TabPanel>content</TabPanel>
</Tabs>

or as HOC:

export default function MyTabList(props) {
  return (
    <div className="react-tabs__menu is--open">
      <TabList>{props.children}</TabList>
    </div>
  );
}

MyTabList.tabsRole = 'TabList';

And it needs the css changes obviously. It would be nice to have an example in the repo that shows how this works, but I currently don't have time to do that.

[bmsterling]

@danez thanks, I'll give it a pass this week.