[Tabs] Make the <Tabs /> component scrollable like <paper-tabs/> in polymer's paper-elements

[ghost]

The polymer paper-elements library contains a tab bar that is scrollable (see example E. https://elements.polymer-project.org/elements/paper-tabs?view=demo:demo/index.html).

Is it possible to support this scrollable property for the tab bar in material-ui?

[afhammad]

+1 this would be cool

[fredriklindell]

+1 would be a nice feature to support small screen devices.

[fredriklindell]

Hi all,

I have implemented responsive tabs in one of my projects. I plan to contribute it to the main repo.

Here is a demo.

[alitaheri]

@fredriklindell Wow they're awesome. We'd love to see the PR 👍 👍 😄

[fredriklindell]

Hi @alitaheri, glad to hear that you like it :)

I have uploaded an initial commit. You can find it here.

However I have two things that I would like to change, I just don't know exactly how. Maybe some of you have run into the same problem.

I need the size of each tab, the only way to read it is after the tab has been added to the DOM. However you are not allowed to do DOM operation in the render function. So I do this in componentWillUpdate - due to that I need them in the render function. First thought was to have the tab info in the state, but you are not allowed to change the state in componentWillUpdate - this forced me to use global variables. Which is not best practice, but it solves the problem.

How would you have solved it?

Thanks in advance!

[alitaheri]

@fredriklindell Thanks a lot for working on this 👍 👍

That's an XY Problem why would you need to know the size of each tab when they are rendered? If it's to see how they will measure themselves then you can put refs on them and get the size in componentDidMount, calculate the dimensions and trigger another render. If it is to get the size after a resize on the window is fired then you can simply listen on that event.

Still, why do you want the size? isn't flexbox flexible enough? 😄

P.S. there is a better way than globals. you can always add more instance fields 😁

[fredriklindell]

@alitaheri Thanks for your suggestions regarding componentDidMount - I will try that during the evening.

I need the width of each tabs since they might not always be equally depending on the text and since it is impossible (what I know of) to calculate the width of a text that depends on which font is used. The main reason to why I need the width is to be able to move the InkBar into the right position and also set the the scroll of the wrapper.

Maybe there is some way to solve this better that I am unaware of.

P.S what do you mean with instance field? :)

[fredriklindell]

@alitaheri I have re-written and removed the global vars and the setState in componentDidUpdate.

I now listen to window resize change and replace the state and I do the same in componentDidMount.

Please have a look at the commit here.

[oliviertassinari]

Please have a look at the commit here.

Why not just opening a pull request here :)?

[fredriklindell]

@oliviertassinari will do, just running it through some friends before the pull request :)

[fredriklindell]

Hi,

Could anyone explain what I need to do in order to get the development server docs for tabs to work.

If I run below command:

npm run browser:development

When above command has finished, without errors, I try to browse to Tabs component demo, but I get below error.

Uncaught Error: [{type: ImportDefaultSpecifier, start: 68, end: 79, loc: [object Object], local: [object Object], id: null, name: null}] does not match type Printable

Any idea to what I have to fix?

Thanks in advance!

[oliviertassinari]

That's an issue with react-docgen. Is this on the master branch or on your branch?

[fredriklindell]

@oliviertassinari it's on my branch which was rebased against master 2016-01-04 i think. Do you know how to solve it? Or is it maybe fixed on master branch?

[oliviertassinari]

You are probably using a code structure that react-docgen don't like. I can't tell you without seeing the code. Just open a PR.

[fredriklindell]

@oliviertassinari I will create a PR on Sunday. Found some things I would like to change before.

[fredriklindell]

@oliviertassinari PR created if you haven't noticed already.

[oliviertassinari]

@fredriklindell Awesome, I will have a look.

[aviraldg]

I've placed a (small) bounty on this at https://www.bountysource.com/issues/24249589-tabs-make-the-tabs-component-scrollable-like-paper-tabs-in-polymer-s-paper-elements, if it makes anyone want to take a look at this.

[pranavparthtyagi]

@oliviertassinari Is there an ETA on this? We need this urgently in one of our projects and are willing to help :)

[oliviertassinari]

There is not ETA. If you really need this feature asap, you are on your own. The best thing to do is to build it for your needs. Once you are happy with it, would be awesome to merge it back in this repository 👍.

[irakli-lekishvili]

Any updates?

[karanveerm]

+1

[peetzweg]

Would also be cool to support the second version of the scrollable tabs, which reduce the overflowing tabs into one.

https://material.google.com/components/tabs.html#tabs-types-of-tabs

[shawnmcknight]

I've posted a repo and npm package to implement the scrollable tabs behavior. The package is a true extension of material-ui - it has material-ui as a dependency to do most of the heavy lifting.

I plan on working this up to create a PR for material-ui with, but there's some additional work I need to do to make that happen (tests, docs, etc.). In the meantime, feel free to try it out and any feedback is appreciated!

[oliviertassinari]

@shawnmcknight Thanks for sharing the project. That could help people looking at the issue.
Notice that the component has be rewritten on the next branch. I see two paths going forward.

1. You add a demo in your project and we link it under the related project of the documentation
2. We improve the next version with those features. We would definitly need you help. But be aware that the implmentation is widly different.

[shawnmcknight]

@oliviertassinari I will tackle item 1 above sometime next week and update this thread when I have something. Once I have that, I'll get myself familiar with the differences in the next branch and what features are being requested. I've developed a pretty good familiarity with the material design specs for tabs as I've worked up my project, so I think I can be of some help with getting the next branch up to snuff. I assume #4795 is the path forward?

[oliviertassinari]

I assume #4795 is the path forward?

@shawnmcknight Yes, it is. We are glad you are willing to lead the effort for improving the Tabs component 😄 .

[shawnmcknight]

You add a demo in your project and we link it under the related project of the documentation.

Today I posted an update to the GitHub repo and npm package for material-ui-scrollable-tabs. No major functionality changes, but I have added an interactive demo based on Material-UI documentation components. I've attached a screenshot below of the example site in action if anybody is interested.

I'm in the process of working through a feature update for that project to improve some of its functionality to make sure I've got a working model there before moving on to the next branch work.

@oliviertassinari I'm assuming this should satisfy the "demo" request quoted above. If so, what's the best bet to get this added as a related project? I can create a PR adding it if that helps things.

[mbrookes]

I can create a PR adding it if that helps things.

That would be great! 👍

[remi13131]

Would it be possible to make a PR on 0.X.X branch as well ?

[oliviertassinari]

@remi13131 We only prioritize bug fixes for the master branch. Sorry.

[remi13131]

I understand. Thanks anyway for this great work.
Are we close (weeks) from 1.0.0 release or really far (months) ?

[oliviertassinari]

@remi13131 I would say months for the stable release, for now, we are releasing alpha versions.

[tushar1994]

uhfiuewri