I'm trying to build a little PWA. For the overall design I use Google Material Design v2 for the web, this was going great but I get off the road when it comes to the tabs.
The documentation of the tabs is very poor https://m2.material.io/components/tabs/web#design-amp-api-documentation, I got it working but not like I intended. There is no explanation on how to add content to a tab so I went on the net and found this code:
const tabBarObj = new MDCTabBar(tabBar);
tabBarObj.listen('MDCTabBar:activated', function(event) {
const contentEls = tabBarContent.querySelectorAll('.tabcontent');
for (const contentb of contentEls) {
contentb.classList.add('hidden');
}
contentEls[event.detail.index].classList.remove('hidden');
});
tabBarContent.querySelector(".tabcontent:first-child").classList.remove('hidden');
tabBarObj.activateTab(0);
This works but not how I intended. I want the tabs to keep on top when scrolling down, they show an example but never explain how. It's the same with swiping within the content (I do not think the way I do it now is the right way).
I did try to find better information and tutorials, but the most of them are in Android Studio, even google does not supply them. The current position off the code is in the main tab of the pwa. 
Has anyone worked with this?
