0

I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.

How can this be accomplished?

Dimitris Fasarakis Hilliard
  • 150,925
  • 31
  • 268
  • 253
user279055
  • 1
  • 4

1 Answers1

0

Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!

For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:

/* Use an extra class to make sure you only target the
   ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
  display: block !important;
}

That should override the mdl-layout__tab-panel's default behaviour, which is to hide.

If this doesn't work, just share a codepen and I should be able to help further!

Sérgio Gomes
  • 720
  • 5
  • 14
  • Working now, thanks. To get this to work I had to also disable the e.preventDefault(); line in the tab.addEventListener section of material.js. – user279055 Sep 23 '15 at 04:26