New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement Tabs Component #37
Comments
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? |
@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! |
Just for fun I started working on that because I didn't do CSS for like 15 years. To be honest I am at a loss how to continue from the basics. 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. 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 To make the actual content visible I am assuming the content is in the same order as the tabs. 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 ;) |
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. 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? @traviskaufman maybe you can give me some advice if you have time :) |
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? |
I think that sounds good! :) |
I should have it by Mid-week latest. Sorry, busy week |
Don't stress yourself out over this. I am doing this for fun :) |
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! |
@material-components/mdc-web Tabs Eng Outline Doc: https://docs.google.com/document/d/112-rXtm8bxtCVAsCN4F5AF87Nnoq6uzL_8ascSmhQ5s/edit#heading=h.ahfunwfp6yis |
I am liking what I see on that codepen demo! |
|
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? |
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. |
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. |
Closing since tabs & scroller have been implemented. |
@traviskaufman @amsheehan Please change the document. "No tabs component in MDC-Web at the moment, TBI." |
The comment's still there. Any update on it being removed? |
Spec reference: https://www.google.com/design/spec/components/tabs.html
The text was updated successfully, but these errors were encountered: