Implement Tabs Component about material-components-web HOT 18 CLOSED

@raisaveuc we've had a lot of asks both internally and externally for it, so we should be starting it either this or next iteration, meaning it should be done by the end of the month. You can always check out our public Pivotal Tracker to see what's coming up next for the core team!

from material-components-web.

Guys, this is one of the few things preventing us from moving to MDC from MDL. Is there any ETA for this feature? Do you need help with it?

from material-components-web.

@material-components/mdc-web Tabs Eng Outline Doc: https://docs.google.com/document/d/112-rXtm8bxtCVAsCN4F5AF87Nnoq6uzL_8ascSmhQ5s/edit#heading=h.ahfunwfp6yis

from material-components-web.

Just FYI, tabs are available with our latest release. We're still working on the tabs scroller (PR at #689 ) and once that's finished we'll be closing out the issue. I'll look into why our live catalog hasn't been updated.

from material-components-web.

I think that sounds good! :)
Waiting for your codepen link!

from material-components-web.

I'm working on a project with MDC but pulling in MDL tabs. It would be super useful to have tabs available in material components :) Any idea when this well get started?

from material-components-web.

Just for fun I started working on that because I didn't do CSS for like 15 years.
Here is a first commit:
codesuki@1ccf547

To be honest I am at a loss how to continue from the basics.
Switching between different tabs works. The CSS is rough, I took the light component as a reference. For the JS part I checked how menu is doing things.

The Material spec is talking about 2 lines of text with ellipsis ending but after doing some research that is just not really possible in plain CSS. There are some hacks but they look... so-so.
Since I am no expert there still might be a way though.

I implemented the ripple to work on the tab bar directly instead of the tabs but that seems to confuse the math. So the solution might be to make 1 ripple per tab. Not sure.

There is no (dark) theme support yet. Haven't checked how to implement that.

I am not sure if it meets the specs regarding padding etc. I used box-model so the bottom-border I am using for the highlight is included in the height. Not sure that is correct either.

To make the actual content visible I am assuming the content is in the same order as the tabs.
That might be unstable.

Any feedback welcome. In case I can continue that I might be able to send a pull request in the future. Otherwise at least the JS code could be re-used or we just let the code rot away ;)
No problem!

from material-components-web.

I continued working on it a little. The ripple effect works now.

The bar highlighting the active tab gives me some problems. I tried using CSS only (border, shadow) but I had no success animating that correctly.
Had a look at how angular does it, using a separate element that is driven by JS.

What do you think is the best solution here? As I understand we could make it driven by JS but there should be a fallback for people not using JS right?
Edit: It seems I couldn't see the forest for the trees. The tab component needs JS anyway to change the views. So there might not even be a need for a fallback.

@traviskaufman maybe you can give me some advice if you have time :)
https://github.com/codesuki/material-components-web/commits/feature/tabs

from material-components-web.

Hey @codesuki,

Sorry I'm late on getting back to you with this!

I actually have a prototype for Tabs in the can, and I was planning on starting work on porting it over to MDC-Web this week, but it looks like you may have beaten me to it ;)

Your PR #356 is off to a really good start. I'm going to put my prototype on Codepen and then update the issue. If you wouldn't mind modifying your implementation such that it satisfies all of the feature requirements present in the prototype, I'd happily help you along with that PR as well as writing tests, docs, etc. Furthermore, the prototype solves all of the issues you outlined in the PR. WDYT?

from material-components-web.

I should have it by Mid-week latest. Sorry, busy week this week (always 😄)

from material-components-web.

Don't stress yourself out over this. I am doing this for fun :)

from material-components-web.

Hey @codesuki, see my comment on your PR. As I mentioned in my comment if there are any other components you'd like to take on, let me know and I'll work directly with you to make sure you have all the requisite knowledge and tools you need to land a full implementation!

from material-components-web.

I am liking what I see on that codepen demo!

from material-components-web.

NOTE: Required changes to MDC Toolbar will be implemented as a separate PR, but covered in this issue

UPDATE: The changes to MDC Toolbar will actually be implemented as part of flexible header

from material-components-web.

Actually, tabs are apparently implemented and functional, but isn't appearing at https://material.io/components/web/catalog/. But a working demo can be found here: https://material-components-web.appspot.com/tabs.html. Take me hours to figure this out.

from material-components-web.

Closing since tabs & scroller have been implemented.

from material-components-web.

@traviskaufman @amsheehan Please change the document.

"No tabs component in MDC-Web at the moment, TBI."

https://github.com/material-components/material-components-web/blob/master/docs/migrating-from-mdl.md#component-equivalence

from material-components-web.

The comment's still there. Any update on it being removed?

from material-components-web.