Material-components-web: Tabs are missing fully functional example

[im-n1]

From documentation and even readme in the module following part has dissapeared. I'm not sure if it's still correct but without this nobody is able to get fully functional tabs.

for (const e of document.querySelectorAll(".mdc-tab-bar")) {

      let tab = new MDCTabBar(e)
      tab.preventDefaultOnClick = true

      tab.listen("MDCTabBar:change", function({detail: tabs}) {

         let index = tabs.activeTabIndex
         let panels = this.nextElementSibling

         // Hide all panels.
         for (const t of panels.querySelectorAll(":scope > .tab-panel"))
             t.classList.remove("active")

         // Show the current one.
         let tab = panels.querySelector(":scope > .tab-panel:nth-child(" + (index + 1) + ")")
         tab.classList.add("active")
     })
 }

[kfranqueiro]

Thanks for reporting this. I agree that we should have something in the README about this.

FWIW I whipped up an example for someone in Discord a couple of weeks ago using the new packages: https://codepen.io/kfranqueiro/pen/yxzppj

[williamernest]

@n1-cz Thanks for reporting this. We'll log an issue to add it to the docs and make a screenshot test page for it as well.

[Marcellllll]

Thank you !! You just saved me a few hours of investigating of these tabs work. I am coming from bootstrap where the whole tabs thing is relatively automatic. It would have taken some time to figure out that the process is so manual with the tab components (unfortunately it is quite hard to find working examples via Google search).

[khalyomede]

Sorry to bump this, I also encountered the same issue where I did not knew how to add content to the tab. Do we know if there is news about adding an example with some text below the tabs? I think it would make it less confusing about the role of the tabs (to switch between contents faster).

A big up to the team that made the components, very huge and clean job!